Header Navigation Menu not displaying correctly

[CrownLabs]

Hello there,

My main header navigation is not displaying or working as it should. The menu items have a grey box behind them and they are too high up. They also don’t change colour once you start scrolling and the white background comes in. The font remains white so even if I were to remove the grey background colour for the menu items, they appear invisible since they are white on a white background.

When I had my site set up on my local machine, everything worked as it should but as soon as I moved everything over to the live server there were inconsistencies and it didn’t work.

I appreciate your help. Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Have you imported your theme options from your test site?

Have you saved your theme options to flush the compiled CSS output?

Thanks.

[CrownLabs]

Thanks for the reply David.

I have tried this and still no luck. Even just having the same settings and options on both the test and live site produces different results.

[David Martin – Support]

Can you screenshot what you have on your local machine?

Sounds like you are either missing some custom CSS/theme setting or a Row setting on that page.

– David.

[CrownLabs]

Check out the attached screenshots. You’ll notice when the scroll position is at the very top of the page and the navbar is transparent, there is no dark grey box around each menu item and when you scroll and the white navbar is presented, the font changes color as it should. This is not happening on my live site. The only thing that is also wrong on my local site is the menu items are too low in the navbar. I’m having alignment issues on my live site as well.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Hi there,

This issue is caused by a 3rd party plugin: https://www.dropbox.com/s/s2xytp8h4zp6qck/Screenshot%202016-08-26%2010.13.25.png?dl=0

I’d suggest overriding that with custom css in the theme options:

.container {
padding-top: 0;
}

Alternatively you can use just this for the header:

.full-center #header-section #header > .container {
padding-top: 0;
}

You can then vertically align the menu with:

.full-center .header-4 nav#main-navigation {
padding-top: 20px;
}

Hope that helps.

– Ed

[CrownLabs]

Thank you so much! This worked for the alignment issues. The only issue I still have is with the colors. The text has a dark grey background and changes to a different grey upon hover, and it doesn’t change once you scroll and the white navbar shows.

The way it’s supposed to be is white text with no background, and when you scroll and the white navbar comes in the font changes to a dark grey, still with no background.

[David Martin – Support]

Hi,

To change the menu link color when the sticky header is triggered, please add this:

.is-sticky #mega-menu-wrap-main_navigation #mega-menu-main_navigation>li.mega-menu-item>a.mega-menu-link {
    color: #666;
}

Thanks.

[CrownLabs]

Thank you very much. Worked like a charm!

[Mohammad – SUPPORT]

Hi,
Great thanks to David.
Mohammad