Genesis Framework – Spacing between primary navigation menu

Community Forums Forums Design Tips and Tricks Genesis Framework – Spacing between primary navigation menu

This topic is: not resolved

This topic contains 5 replies, has 4 voices, and was last updated by  chillybin 1 year, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #66347

    vishalpai
    Participant

    Hi there,
    I would appreciate your help with this problem which I can’t seem to find a solution to despite hunting.
    I am using Genesis Framework – the base theme. I want the space between items on my primary navigation menu (i.e. the black menu) to be zero. Everytime someone hovers over a link it seems to have a little black gap between the two items!
    I’ve tried changing padding and margin settings within “.genesis-nav-menu .menu-item” and “.genesis-nav-menu” but nothing seems to take it away. I’ve enclosed an image to help you understand what I mean.
    Could someone help?
    Thank you,
    Vishal

    http://www.vishalpai.com
    #66657

    pxforti
    Participant

    I don’t see this on your site.


    writeNowDesign
    WordPress and Ecommerce Website Design

    #66799

    vishalpai
    Participant

    Hi,
    Thanks for the reply.
    Click on one of the primary navigation menu items “Elective” for example. Now move the cursor over an adjacent item e.g. “Basic Sciences” – this is the gap I am referring to. It still seems to be present when I’m viewing my web site on Safari.
    I can’t figure out the code to get rid of this gap.
    Regards,
    Vishal

    #66810

    pxforti
    Participant

    I don’t see that gap you describe in Chrome, Firefox, or Safari.


    writeNowDesign
    WordPress and Ecommerce Website Design

    #74739

    who
    Participant

    I had the exact same problem Vishal was talking about, with gaps between horizontal li menu items. Solved for me by changing this:

    .genesis-nav-menu .menu-item {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    to this:

    .genesis-nav-menu .menu-item {
    float:left;
    width:auto;
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    Just in case anyone else runs into this issue. . .

    #84133

    chillybin
    Participant

    Thanks, i got mine working with the following (html5 sample theme)

    .genesis-nav-menu {
    	clear: both;
    	/*width: 100%;*/
    	float: right;
    }
    
    .genesis-nav-menu .menu-item {
    	float:left;
    	width:auto;
    	display: inline-block;
    	text-align: left;
    }

    We are a web design & development consultancy based in Singapore who specialise in all things WordPress & Genesis. | ChillyBin Web Design & Consultancy: http://www.chillybin.com.sg | Twitter: @chillybindesign

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.