Header menu not appearing

My website: http://www.factorydesk.com/

Seems like I have everything in place and all is set so as to display the header menu, but it’s not appearing. I’ve also tried removing the custom CSS applied to header and the menu still didn’t appear in the preview. What could I be missing?

Hi Maurice,

Can you provide temp admin access, please, so we can take a closer look. Also, do we have permission to remove any custom code for debugging purposes and disable plugins?

Thanks,
Danny

[Content Hidden]

Hey Maurice,

That would be caused by the custom CSS you have below. Removing it should allow the Fixed Header to start working again.

View post on imgur.com

Ben

I tried removing that code, the menu (nav bar items) still doesn’t appear on any of the pages.

Ah! So you were referring to the nav items, not the header itself. Sorry about that!

It looks like the font-sizes of the menu items are set to zero. Can you reset it under Theme Customizer > Header > Nav Style and see if that fixes it?

ben

That worked, thanks!

However, now I have problems with header being fixed on the homepage (despite removing the custom CSS you pasted before). I also had problems with header on the homepage having unnecessary padding but I kind of “fixed” it by playing with the .home .fl-page-content {margin-top: -60px;} and setting the position of header to absolute .home .fl-page-header-primary {position: absolute;}

It’s not looking good on small devices though, and I couldn’t get rid of the extra unnecessary 20px padding of the header.

The header is working and looking good on pages other than home.

Also, is there a way to make the header (and logo) go smaller once somebody starts scrolling down a page?

Hey Maurice,

I believe you’re setting the header to be fixed? Did you want to make it fixed on all other pages except the homepage? If you want the logo to go smaller after scrolling down, you can set the header to Shrink, instead of Fixed.

Ben

I want to make the header fixed on all pages. Could you also please address the problems with header padding I’m having?

Thanks!

Hey Maurice,

The extra space on top of your page is added when you set the Fixed Header setting to Fixed. The reason why the Fixed Header isn’t working on your site is because of some custom CSS that you have. Can you remove the styling you have above along with the CSS that you have on the screenshot below then set the Fixed Header to Fixed and see if that’s what you’re looking for?

View post on imgur.com

Ben

Hey Ben, removed, it seems to be working fine on the homepage now.

However, when I reload the page, the header logo disappears! It still loads for the Shrink header but not for the primary one on the top of the page.

Also, the CSS code that was applied before allowed me to have the transparent header background on homepage (and homepage only). Now the default opaque background is showing:

http://screencast.com/t/45I3gN131

Any way to make it transparent again?

Cheers!

Hey Maurice,

So the logo disappearing issue is actually a bug. We’ve already fixed it on our end though and will be out on the next maintenance patch.

For the header background, we can get that back by adding the CSS snippet below. :slight_smile:

@media (max-width: 768px) {
    .home .fl-page-header-primary {
    background: none;
  }
}

Ben

I see, looking forward to the patch.

Unfortunately adding the snippet didn’t help - the background is still there.

Ah, sorry about that! It should have been min-width instead of max-width. Try the one below.

@media (min-width: 768px) {
    .home .fl-page-header-primary {
    background: none;
  }
}

Ben

That worked, but it doesn’t look good when I start scrolling.

Is there any way to apply a custom CSS background to Shrink header once it “shrinks”?

Hey Maurice,

The class .fl-shrink-header gets added to the main header container when you scroll down. You can target with your background CSS.

Ben

Thank you, around when should we expect the patch for Shrink header to roll out? Just so I know when to change things up. Also, I know setting the background opacity via CSS is tricky, but any way to do it for the Shrink header only while keeping the primary header on the homepage background-less?

Hey Maurice,

We’re actually pretty quick about releasing maintenance patches. We just released one this week for the plugin so hopefully we should be able to put one out for the theme by next week, or the week after(not really sure).

That is possible. For the Shrink layout, there is no separate markup for the Fixed Header, but the class fl-shrink-header gets added as it shrinks. Simply target that class and it shouldn’t affect the non-shrinked header.

Ben