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 10 months, 3 weeks ago.

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

    vishalpai
    Participant
    Post count: 1

    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
    Post count: 68

    I don’t see this on your site.


    writeNowDesign
    WordPress and Ecommerce Website Design

    #66799

    vishalpai
    Participant
    Post count: 1

    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
    Post count: 68

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


    writeNowDesign
    WordPress and Ecommerce Website Design

    #74739

    who
    Participant
    Post count: 1

    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
    Post count: 81

    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.