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


This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1 adaml44

adaml44

    Member

  • Members
  • PipPip
  • 29 posts

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



#2 James B†

James B

    Advocate

  • DMS Subscriber†
  • 5126 posts

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

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

  • DMS Subscriber†
  • 5126 posts

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

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

  • DMS Subscriber†
  • 5126 posts

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

Posted 11 May 2013 - 04:54 AM

Alright, then - perfect it is!



#8 James B†

James B

    Advocate

  • DMS Subscriber†
  • 5126 posts

Posted 11 May 2013 - 04:57 AM

Excellent :-)