Elemental Theme - How to make "sitewide header" more responsive?
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?
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).
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...
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).
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.
Moving the Search block into the mobile navigation is more involved and I am not sure what you are comfortable doing.