Jump to content
Sign in to follow this  
adaml44

Space Between Primary and Second Nav

Recommended Posts

adaml44    1
adaml44

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

  • Like 1

Share this post


Link to post
Share on other sites
James B    436
James B

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
adaml44    1
adaml44

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
adaml44    1
adaml44

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
adaml44    1
adaml44

Alright, then - perfect it is!

Share this post


Link to post
Share on other sites
James B    436
James B

Excellent :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      we have noticed that the Elements section is displaying incorrectly under IE11 on Windows 10. See xiting.us. The 3 sections above the footer are Elements sections and they have way too much spacing.
      Is this a known issue?
      Thanks
      Michael
    • JawDesigns
      By JawDesigns
      Hi everyone,
      I was hoping someone could help. Firstly all my websites are DMS and all hosted on Flywheel. Recently I have noticed that on my sites including fresh installs with only DMS and a few DMS sections the main wordpress menus are disappearing when I hover them in the dashboard. This looks really flakey and I am not sure why. I have tried disabling the plugins but this does not help me.
      Please see screen grab. Has anyone seen this?
      Thanks, James
       

    • margie
      By margie
      Hi-
       
      I am using Quickslider for the display of one image.  How do I remove the padding or space right above the image so that it will be flush with the cnavas section above it?
       
      Thanks so much.
       
       
    • create
      By create
      I have a problem with sub menus with my main nav. I basically have a top-level nav called 'products' and custom sub heading called 'Everyday' with a sub menu from that, but for some reason - its not working.
       
      I can't understand why, it should be seamless *or* is there something within the framework that prevents this?
       
      See the attached screenshots showing how the menu is structured and should be (back-end) and what its doing front end.
       
      Grateful for any pointers
    • PeterBuilt
      By PeterBuilt
      Hi,
       
      I posted two different questions earlier, and I am having a lot of trouble with DMS 2.
       
      Every time I make a change to one page absed on a specific DMS 2-template the rest of my website is affected, some loses all styling, some loses sections.
       
      I am using Polylang for translations. For this I have made a number of custom menus in different languages.
       
      When I try to make the English version use the English menu all the other language pages are set to use the english menu.
       
      This is no good - I am really frustrated.
       
      I am almost sure part of the blame falls on me - I must be doing something wrong.
       
      Can you please help me out - thanks.
       
      PedroDK
       
       
×