Side Header Doesn't Collapse

[mwr1701]

Greetings…

I am sure I am missing something obvious here, but hoping you can point me to the right solution. I have created a header using Pro, and assigned it for the entire site. It looks great, but it never collapses for small devices. I have tried using two containers (mobile and desktop), and set the hide on device options, but the only thing that happens is when you go to the smaller devices, it switches between the two containers, the sidebar stays there. I’ve looked all through here with many different ways of asking the question, but I can’t find anything… no success with google searches either.

What I am looking to happen is when you get to a smaller device, the side bar disappears and a hamburger button appears. Clicking on the hamburger, brings the side header back into view so that it can be used, then goes away after something is clicked. I have seen several sites that work this way, so I can’t imagine that it is not supported, but rather something I am missing.

Thanks

[ruenel]

Hello @mwr1701,

Thanks for writing in! In your header, you will need to insert the navigation inline element and the navigation collapsed element. You can show/hide the element to the respective screen size by utilizing the “Hide During Breakpoints” option.

• https://theme.co/docs/hide-or-show-content-by-device-size

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[mwr1701]

Secure Note submitted

[ruenel]

Hello @mwr1701,

You need to edit your custom header and do the following:

1.) Create a Fixed Top bar and with your logo and navigation dropdown element in it.

This bar will only be visible on smaller screens.

2.) In your Fixed Left bar, it should be set to only be visible or medium and large screens.

The Mobile container can be removed as it is no longer necessary.

Hope this helps.

[mwr1701]

Thanks, I see how that works, but not exactly what I had in mind. What I wanted to do was keep the side menu format, just have it hidden until the user clicked the hamburger. I’ve placed screen shots of another website that does what I am looking for in the secure reply.

[ruenel]

Hello @mwr1701,

What we have in the builder is a fixed left bar. This bar does not work the way you have it in mind. Regretfully the feature that you want is not possible with the custom header. What you can do is to have a fixed top bar that will only display on smaller screens. You can insert an off-canvas so that on a small screen, you can toggle it and display the logo and menu on the side.

Kindly check out the example I have made in your header. Hope this helps.

[mwr1701]

Thank You! That is much closer to what I am looking for!

[ruenel]

You are most welcome @mwr1701.