WordPress.org

Forums

Twenty Thirteen
[resolved] problem customizing nav menu (5 posts)

  1. leojez
    Member
    Posted 1 year 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!

  2. Jesin A
    Member
    Posted 1 year 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;
    }
  3. leojez
    Member
    Posted 1 year 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.

  4. Jesin A
    Member
    Posted 1 year 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>

  5. leojez
    Member
    Posted 1 year ago #

    Perfect - thank you very much!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic