WordPress.org

Ready to get started?Download WordPress

Forums

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

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

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

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

  5. leojez
    Member
    Posted 10 months ago #

    Perfect - thank you very much!

Reply

You must log in to post.

About this Theme

About this Topic