Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Adding images to a nav menu - wordpress

    Hey everyone,
    I am using a Wordpress theme called "Me", the link is here: Me | Premium Portfolio Theme

    I made each menu item link to a different page instead of scrolling down the page, eg. site/works.html instead of #works. I now want to replace each menu item's words with an image, to have one image per menu item.

    Can anyone help me with this?

    Cheers,
    Dave

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Dave22,
    Have a look at this, might give you a start:
    Some new CSS -
    Code:
    li#menu-item-7 a {
    height: 172px;
    width: 172px;
    display: block;
    background: url(http://magna-themes.com/demos/wordpress/me/wp-content/uploads/2013/12/logo.png);
    }
    And get rid of the original text in the markup like this -
    Code:
                   <ul id="menu-home-menu" class="menu sf-js-enabled sf-shadow">
    
    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7">
    <a href="#wrapper"></a>
    </li>
    
    <li id="menu-item-8" class="me
    Loosely based on this rollover demo.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You said you're using WordPress Dave, wonder over and take a look at: WordPress ? Nav Menu Images « WordPress Plugins simple plugin I think fixes your issue and saves you editing WordPress code/css.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by Excavator View Post
    Hello Dave22,
    Have a look at this, might give you a start:
    Some new CSS -
    Code:
    li#menu-item-7 a {
    height: 172px;
    width: 172px;
    display: block;
    background: url(http://magna-themes.com/demos/wordpress/me/wp-content/uploads/2013/12/logo.png);
    }
    And get rid of the original text in the markup like this -
    Code:
                   <ul id="menu-home-menu" class="menu sf-js-enabled sf-shadow">
    
    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7">
    <a href="#wrapper"></a>
    </li>
    
    <li id="menu-item-8" class="me
    Loosely based on this rollover demo.
    This wouldn't of worked, he would of had to edit the header.php in the themes dir and it's full of PHP code which talks to the admin panel. It's not as easy as you thought it would be.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by tempz View Post
    This wouldn't of worked, he would of had to edit the header.php in the themes dir and it's full of PHP code which talks to the admin panel. It's not as easy as you thought it would be.
    His Admin panel is his own deal. I'm just showing the concept, one approach to putting an image in place of the anchor text he has now.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •