Archived

This topic is now archived and is closed to further replies.

  • 0

Space Between Primary and Second Nav


Question

Posted · Report post

In my menu, there are 2 fields with secondary nav drop-downs. When hovered over, the secondary items display, but there's a 6px gap between the primary and secondary nav, which I want to eliminate. I'd ideally use firebug, but when you hover over the space I want to get rid of, the secondary nav goes away (which is why I want to get rid of the space. Help for eliminating this margin/padding/whatever would be appreciated.

 

 

 

Nav-Space.jpg

1 person likes this

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Hi there, you can add the border to the top element of the drop down by using the ID of the menu item for the css.

 

Like #menu-item-364 {border: 1px solid white;}

Share this post


Link to post
Share on other sites

Posted · Report post

I can't find that code anywhere - it's definitely not showing up in the base or child style sheet. I trield entering the code you provided changing the "top: 34px;" to "top: 0px;" to try to override it, but it didn't change anything.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, if you put that code into the custom css box inside the platform admin panel, you won't need to edit any core files.

 

I found that code in the sub-menu css using firebug. Setting to 0 removed the gap - http://screencast.com/t/AlSRXVDvtCN8

Share this post


Link to post
Share on other sites

Posted · Report post

I don't understand why that works in the custom CSS page, but not in the child theme style sheet. But for whatever reason, it does.

 

I adjusted the px to 28 (eliminating the 6px gap that 34 left). The only problem now is that there's no 1px white line separating the primary nav option from the secondary (like there are between the secondary options). I tried a few methods of addressing that, but they all resulted in a 1px line that, if hovered over, dropped the secondary nav menu (though even without a border, if you hover the mouse *just* on the edge between the two, the secondary nav still disappears).

 

If you have any tips for that I'm open to shooting for perfect, but it's definitely already at good-enough.

 

Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

Alright, then - perfect it is!

Share this post


Link to post
Share on other sites

Posted · Report post

Excellent :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Adam

 

When you're making changes like this on a element which only shows on hover, the best way I find to get to view it constantly is to change the display to visible, block. Example in this screenshot - http://screencast.com/t/VvzHDEKA, then you can go through the rest of the code in firebug to see which css takes affect.

 

Looking at your site your menu has a top:34px which will need to be removed to get it to align to the top of the nav.

 

.sf-menu li:hover ul, .sf-menu li.sfHover ul {

    left: 0;
    top: 34px;
    z-index: 99;
}

Share this post


Link to post
Share on other sites