Sticky header configuration for wider screens

[Pixeldust]

Hi Russ,

I currently have my style set up so the logo and visitor tabs are in the logo row, while the navigation is on its own row below. Something like this:

Ideally, I'd like to make the navigation hamburger, logo, and visitor tabs all sticky when a user scrolls on wider screens, like it is on smaller screens. Is this possible?

I have the mobile bar enabled for mobile screens, so the header shouldn't be sticky if the mobile bar is activated.

My current theme settings are:

Page layout:
Style: Edge
Forum layout: Default

Header and Navigation:
Logo position: Default position
Search location: Default
Visitor tabs location: Logo block
Stretch navigation: Stretch primary and sub-navigation rows
Sticky navigation element: Primary navigation row only

 

[Russ]

Hello, sorry for the late response. Gone on a long weekend trip.

It sounds like you just need to activate the mobile navigation sooner. Head to Style properties -> Header and navigation -> Navigation collapse width. You can put in a value here like 1000px, or you change change it from @xf-responsiveMedium to @xf-responsiveWide to see if that helps.

 

[Pixeldust]

Thanks, @Russ. Unfortunately, that won't accomplish what I'm looking for. Let me explain a little differently.

In my current style, I have the logo and visitor tabs in the first row (logo block). Navigation is in the second row and is sticky only on wider screens. I'm using the mobile bar on smaller screens and don't want the sticky header activated there.

Currently, when a user (wider screens) scrolls, only the navigation row is sticky. The header and visitor links are not sticky and don't scroll. The sticky section looks something like this:

Instead, I'd like the sticky section to appear like this, collapsing the nav, then including the logo and visitor tabs. It should only display this way in the sticky navigation on wider screens (when the mobile bar isn't activated).

Please let me know if this makes more sense and if it's possible to achieve.

 

[Russ]

So, those elements are in the nav just hidden using CSS. Maybe this will help if I understand?

@media (min-width: (@xf-responsiveMedium  + 1))
{
.p-navSticky.is-sticky
{
.p-nav .p-nav-menuTrigger, .p-nav-smallLogo, .p-nav .p-nav-opposite {
    display: block;
}
}
}

It will make it so those elements (small logo, menu trigger, user nav) will show only when the nav is sticky and above medium screens.