Custom HTML/CSS header menu behaviour

[ColinCampbell]

I want to use the custom HTML/CSS header option to make some small cosmetic changes to my site's header, but when I do I've noticed it changes the behaviour of the navbar menu on smaller screens/devices.

When using the out-of-the-box 'prominent' header option the menu appears as a single option at the top of the screen when viewed on small screen.  Clicking on the menu opens it up with all the link items listed beneath and it is visible all the time.

However when you switch to the custom HTML/CSS header option the menu you effectively get the expanded menu all the time (although it is only visible at the top of the page or if you scroll up).  When it is visible it takes up a lot of screen space - especially if you have lots of links in your menu.

Is there anyway to get the default behaviour when using the custom option?

[KlaraSchmitt · Accepted solution]

Hello Colin,

Unfortunately, at this time it is not possible for us to take your custom code and render the mobile menu that you'd get if you were using one of our pre-designed layouts. Using the Custom Header option means that you get to set the look, but it also means that we're hands-off on controlling the layout at the different breakpoints.

However, our app uses Bootstrap, so if you structure your custom header the way they suggest in their documentation, you can have a menu that toggles on/off via a burger icon and it doesn't have to start expanded. Based on your screenshot, it looks like you might have deleted the part of their code that does this for you though. If you take a look at my response to Nataliya (bullet point #2): https://community.esri.com/thread/237973-hub-site-custom-header#comment-869561 you can read more about how to correctly structure your custom header to handle responsive layouts automatically.