-
Posts
-
Using the Cobalt theme, the site logo area it far too large, and causes the nav menu to wrap. How can I reduce the width of the site menu area? The area allocated for the site logo is at least 3x the width of the graphic, roughly 50% of screen width which seems like it would never be needed, whereas I can only have 4 menu items before the wrap which confuses visitors.
Thanks for your question! There is no way to adjust the size of the menu itself from the Customizer, but you can decrease the font size under the Font section, which can get you the desired effect of fitting more navigation elements on one line. You could also consider nesting certain navigational links in dropdown menus. As a last resort, it is possible to use an individual, self-coded CSS solution (under the Advanced section of the Customizer).
Thanks for the super-fast response, Christopherm!
Unfortunately, the menu font is small enough already, and I am not interested in nesting menus (for my visitors, that will just confuse them.) The problem is that there is so much wasted space in the header next to the logo, and still the menu wraps. Header-6 and header-7 are in the same row, and literally, are set to each 50% of the screen, but I have never seen a site where the logo needs 50% of the width of the header, whereas a menu is often more than 50% of the width. Where is the width of header-6 defined in the theme? Can it be overridden with some custom CSS? Or can the responsive menu be moved to a different location in the header?
Yes, the menu can be moved to beneath or on top of the header in Customizer > Menus > primary. You can select a different menu location there. If you choose to go the CSS route, I’d recommend using the developer tools in your browser to make sure you’re targeting the correct CSS elements. You can try out different CSS code snippets in the Customizer under the Advanced section (this is also the safest place to do so).
Yeah, I tried moving the menu to area beneath the header, but when it is there, it is no longer responsive and becomes left-justified. In addition, the primary menu still shows the “hamburger” icon on a mobile device, even when the menu has been moved to the area beneath. I am willing to try the custom CSS route, but can you give me any hints as to how to change it?
If you are trying to both decrease the width of the header and inhibit the appearance of the hamburger menu, that will require some deeper intervention beyond the scope of this community support area.
Whether or not that can be achieved with CSS alone and without creating a page template in a child theme I can’t say for sure. We’re only equipped to help with the BoldGrid tools available in the program itself. To that end, I hope you would consider submitting a feature request for a control that can adjust the sizes of elements in the header/footer areas if you think such a feature would be valuable.
But in the meantime, I think you will get the best outcome possible by contacting a developer/designer proficient in the WordPress theme framework to add your requested changes into a child theme.
- The topic ‘Site logo area too wide in header’ is closed to new replies.
