I’ve been struggling to figure out how exactly to get this to work. I have a few buttons in my header, on desktop they take up 50% of the width and things look funky as the screen size gets narrow. So what I’d like to do is switch to a hamburger/sidebar menu just before my buttons run into my logo.
Will I have to create a mobile version and somehow tell it to be used or visible under s certain width or hide my button groups under a certain width and make my hamburger icon visible on the same header?
I’ve read through my similar topics and just can’t seem to figure it out.
Either option works, so go with what you prefer. Personally, I just use a different header altogether. For how I work, it’s easier to organize. I don’t think there’s a right/wrong way here.
2 Likes
If I create a reusable mobile header, would I have to create a mobile version of each page or would I be able to make it visible under a set width and hide my current one then as well?
You don’t need worry about whether or not it is a “mobile” header. Just create another header, name it whatever you want, then have it show/hide based on screen widths.
1 Like
Gotcha, thanks for the tips!
As with most Bubble things, there are many different ways to work. I hope you find the one that works best for you!
The only caveat I can see for copying the entire header would be workflow maintenance. You’ll now have to update two reusable elements whenever you make workflow changes.
1 Like
Ok, that’s good to know. I think I’ll try to work on making the adjustments I need with the one header I already have then. Just a matter of figuring out how to hide/show everything correctly at a specified width I guess.
Yep, definitely true. It hasn’t become painful enough for me yet to rebuild. In my next app, I’m probably going to go the way you suggested!
1 Like
The only thing that made me even think about this was because I wanted to add a piece of workflow that needed to be evaluated on every page. Having to go to every page to add it, and then thinking about long term maintenance if I ever needed to make changes seemed like a nightmare.
I realized, that since I was using a reusable header on every page, I could put the workflow on the header and, by proxy, it would be available on every page. 
1 Like
Thanks for the suggestions, I was able to create my mobile responsive reusable header by showing/hiding elements at certain widths. And my workflows are all in one place.
1 Like
