Hiding the regular header, but not hiding the fixed header

I’m interested in hiding the regular header but not the fixed header. This will only be for the home page. The idea is that, at first, there is no header/navigation, but then when scrolling the fixed header appears.

I used the following:
.home .fl-page-header {

This got rid of the header…but it also got rid of the fixed header. I tried a whole bunch of variations on the available classes with no luck. Is there a solution?

Any help would be great!

Hey Joel,

Thanks for getting in touch! Try this CSS snippet and see if it works for you.

.home .fl-page-header-primary {
  position: absolute;
  left: -9999px;

Let us know how it goes! :slight_smile:



That worked! Thanks for the solution!

I just realized and became concerned about something…I guess I needed to sleep on it :slight_smile: Will hiding the navigation like this hurt page rankings and SEO?

Another design solution may be to give the header a transparent background and position it over the featured image. This way it still emphasizes the message and call to action but reduces the visibility of the navigation.

Hey Joel,

No worries! If that’s the case then you may need to use another way to achieve this. You can use a 3rd party plugin or custom code your fixed header and disable ours. Then use our No Header/Footer for your homepage that way the header won’t be on the markup. :slight_smile:

Using display: none won’t work since the main header will be hidden. The fixed header depends on the positioning of the main header.


Ben! I’m playing with some options now. Thank you!

Hey Joel,

No worries! Let us know if you find/need anything further! :slight_smile: