Jump to content


Photo

Space Between Primary and Second Nav

primary nav second nav menus spacing

Best Answer James B , 11 May 2013 - 04:24 AM

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;}

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 adaml44

adaml44

    Member

  • Members
  • PipPip
  • 29 posts
  • Country: Country Flag

Posted 10 May 2013 - 10:02 PM

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


  • bekanGop likes this

#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 May 2013 - 10:17 PM

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;
}


#3 adaml44

adaml44

    Member

  • Members
  • PipPip
  • 29 posts
  • Country: Country Flag

Posted 11 May 2013 - 03:23 AM

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.



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 May 2013 - 03:36 AM

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



#5 adaml44

adaml44

    Member

  • Members
  • PipPip
  • 29 posts
  • Country: Country Flag

Posted 11 May 2013 - 04:03 AM

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.



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 May 2013 - 04:24 AM   Best Answer

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;}



#7 adaml44

adaml44

    Member

  • Members
  • PipPip
  • 29 posts
  • Country: Country Flag

Posted 11 May 2013 - 04:54 AM

Alright, then - perfect it is!



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 May 2013 - 04:57 AM

Excellent :-)







Also tagged with one or more of these keywords: primary nav, second nav, menus, spacing