Sticky header enabled ONLY for responsive website

erikstatustrucks · January 2017

Is it possible to enable the sticky header only for the mobile version of the site? This is for www.statustrucks.com

I've found that if I disable it in the header/subheader options it disappears both for desktop and responsive versions of the site, even if the sticky box is checked under the responsive - header options.

I need the header and not just the navigation toggle to remain sticky for mobile and tablets but disable it for desktop screen sizes.

I had tried hiding it with css on desktop screen sizes, but that only removes the navigation and shows an empty header when I scroll down.
@media only screen and (min-width: 768px) { #Top_bar.is-sticky .menu_wrapper:not(.responsive-menu-toggle) { display: none !important; } }

Any suggestions?

Albert · January 2017

Hi,

yes, it is possible. You can enable sticky header for mobile only under Theme options > Responsive > Header section.

erikstatustrucks · February 2017

Thank you for the prompt reply. I tried that but now the header background color disappears on the responsive version. The only thing I see on the mobile version when I scroll down are the three lines for the toggle menu. The problem with that is that these lines are not very visible.

How can I keep a sticky header that includes a background color and the logo similar to the desktop sticky header?

Here's an example of how the sticky header looks on the phone:

Albert · February 2017

We are sorry but we do not have an option to keep the same header on sticky mobile as it is in default header. The only option we may recommend are Header Minimal layouts that can be set under Theme options > Responsive > Header section.

Sticky header enabled ONLY for responsive website

Comments