WordPress.org

Support

Support » Themes and Templates » [Resolved] problem customizing nav menu

[Resolved] problem customizing nav menu

  • Hello,

    I have used Twenty Thirteen as a basis of creating a new theme. Everything has gone well until I tried adding a background menu divider to the nav bar.

    Please see the site here: http://www.websitedesignjapan.com/TestPages/nzLifeTours/

    As you can see, the nav menu has green dividers between each menu item. However, on hover, the green highlight doesn’t fully cover the space of the menu item … there is a small (approx 10px) space to the left of the green hover highlight.

    I can’t seem to figure this out. I’ve added the divider in css as:

    .nav-menu li {
    	display: inline-block;
    	position: relative;
    	background-image: url(images/menuDivider.png);
    	background-repeat: repeat-y;
    	background-position: right;
    }

    Any help would be really appreciated.

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Your code is missing float:left

    .nav-menu li {
    	display: inline-block;
    	position: relative;
    	background-image: url(images/menuDivider.png);
    	background-repeat: repeat-y;
    	background-position: right;
    	float: left;
    }

    Hi Jessin,

    Excellent – that fixed it! Thank you. I can’t believe I didn’t notice that.

    Just one more qu … same nav menu. With the divider as a background image, it shows up (of course) on the last menu item (far right of the menu bar). I’d really like this one not to show. Any idea how I can get the code to remove it?

    Thank you in advance.

    I’ll give you a solution for it however it’ll apply only to the current menu you are using.

    #menu-item-42 {
      background-image: none;
    }

    This menu-item-42 denotes the menu “お問い合わせ”
    So later on if you replace this menu with something else you need to open the source code and find the new id attribute for it.

    As of now line 64 has menu-item-42

    <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://www.websitedesignjapan.com/TestPages/nzLifeTours/contact">お問い合わせ</a>

    Perfect – thank you very much!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] problem customizing nav menu’ is closed to new replies.