problem customizing nav menu

  • Resolved leojez

    (@leojez)


    10 years, 7 months ago

    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)
  • Jesin A

    (@jesin)

    10 years, 7 months ago

    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;
}
    Thread Starter leojez

    (@leojez)

    10 years, 7 months ago

    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.

    Jesin A

    (@jesin)

    10 years, 7 months ago

    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>

    Thread Starter leojez

    (@leojez)

    10 years, 7 months ago

    Perfect – thank you very much!

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