Bolt (Header) v2.2.14--can we collapse these to an off-canvas menu?

[WildcatMedia]

I'm trying to find a setting or other alteration to move these icons below into an off-canvas menu or otherwise collapse them on mobile devices. We're using the Bolt (Header) variation of the main theme. Gets kind of ugly since on mobile, the icons are pushed off the right side of the screen where there is no nav bar background.

Example with a 412px-wide viewport--I have to scroll sideways to see all the icons:

I changed our forum logo (which is only 200px wide) so that it would remain at the same size, vs, shrinking into unreadable size. But I still don't know if I went to a square logo that these icons would fit any better.

FYI, the following icon allows me to eliminate the staff bar and put all the tools and alerts into a single staff icon.

I'm almost thinking I might need to put the staff bar back at the top and move some of these other icons up there (like the account icon, messages, alerts, etc.) but that could be a lot of work.

 

[WildcatMedia]

I've been trying other selections in the style properties to move the logo outside the navigation, or move the visitor tabs to the staff bar, but it appears neither the staff bar nor the logo block can remain sticky in mobile navigation.
Even the "top bar" won't remain sticky, not unless I try to cobble together a template and CSS for the template xb_top_bar so I can relocate the visitor tabs up there and have them remain visible. Then I could keep the logo and navigation all on the nav bar.

 

[WildcatMedia]

I promise I'll quit replying to myself.

This gets the visitor tabs into the top bar template:

<xf:macro name="PAGE_CONTAINER::visitortabs" arg-searchConstraints="{$searchConstraints}" arg-navTree="{$navTree}" />

Now if I can just get the top bar sticky, that would solve my layout issue.

Is there an easy way to make it sticky, with the nav bar beneath and the logo always in the navbar? At this point I don't even care if the header image shows anymore...it's essentially just wasted space at this point, even though it looks cool on first visit using a desktop to view it.

Alternately, making the staff bar sticky at all screen sizes, and moving the visitor tabs there, would do about the same thing...

 

[Russ]

I might need to see it actually live, if you to submit a ticket to a URL where I can view it, it could help.

We do have a sticky staff bar option but it doesn't apply to mobile. You could add this to your extra.less:

@header-staffHeight: 16px + (xf-default(@xf-publicStaffBar--font-size, @xf-fontSizeNormal) * (@xf-lineHeightDefault)) + 1px; /** 16px is padding top bottom from .p-staffBar-inner and .p-staffBar-link **/
.has-staffBar
{
    .p-staffBar
    {
            z-index: @zIndex-4;
            position: sticky;
            top: 0;
    }
    [data-xf-init="sticky-header"]
    {
        top: @header-staffHeight;
    }
}

That would make it so the staff bar is always sticky.

Last, this icons do look a little large. You could try this also in extra.less:

@media (max-width: @xf-responsiveMedium)
{
.p-nav-opposite .p-navgroup-link {
    padding-right: 7px;
    padding-left: 7px;
    font-size: 14px;
}
}

May need to make some adjustments with the font-size / horizontal padding.

 

[WildcatMedia]

I made the icons larger since I wanted larger and more visible touchpoints for mobile visitors, as some of the membership skews older and struggle seeing parts of the old theme being used on the forum.

I found workarounds to get everything lined up the way I want, but it all seems kind of "hacky." I'm going to start over with the CSS you provided above as it makes more sense than what I worked up. I already found a way to keep the visitor tabs in the staff bar.

Thanks for the tip!

 

[Russ]

My CSS will target it just on mobile screens when the off-canvas menu kicks in it might be an elegant solution while keeping the icons larger for larger screens.