Elemental Theme - How to make "sitewide header" more responsive?

Permalink
I have two sites set up with the default Elemental theme and I am not happy with how the header displays on mobile. The menu minimizes to a hamburger menu, which is great, but the search box stays the same as on desktop and any "logo" or ID content I put in the "Sitewide Header Site title" area just wraps. The result is that "header" material fills up most of the first screen a user sees.

What I would like would be for the logo/ID content to shrink to a reasonable size on mobile, and for the search box to move into the hamburger menu. I understand I cannot just make a wish and make it happen, however.

Can anyone tell me what I can do to make the sitewide header (shall we say) "more similar" to what I have in mind?

Many thanks!

 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi doccarter,

What are the links to the two websites?

Changing the logo size at smaller screen widths may involve CSS only or customizing your theme "elements". Adding the Search block to the mobile navigation will involve creating a custom template for the Auto-Nav block (possibly based on the Responsive Header Navigation).
doccarter replied on at Permalink Reply
Thanks for your response.

Does that mean the Elemental theme is not intended to have a responsive "sitewide header" beyond the autonav menu turning into a hamburger menu on mobile? I can't imagine most people would want the "sitewide header" to take up the entire screen on mobile, so it seems like there must be a way . . .

The sites arehttp://cassiecarter.com/Concrete5... andhttp://catholicboy.com/Concrete5...
MrKDilkington replied on at Permalink Reply
MrKDilkington
@doccarter

The default theme is designed to be flexible, but depending on the amount and type of content added, there are limits to what it can do without being customized.

From what you describe, and after seeing the site, you will likely need to customize the header.php file. This would involve adjusting the Bootstrap classes to resize your content at different screen widths (possibly also requiring some custom CSS).
elemental\elements\header.php
https://getbootstrap.com/docs/3.3/css/#grid...

A note about customizing the Elemental theme. It is a core file, and any changes you make to it will be lost when you update. To preserve changes made, you can work on a packaged copy of Elemental called Cloneamental.
https://www.concrete5.org/marketplace/themes/cloneamental...

Moving the Search block into the mobile navigation is more involved and I am not sure what you are comfortable doing.