timmins00 Feb 25, 2016 · 11:04 pm #3117 I am trying to set the toggle from normal to mobile responsive menu at the narrowest width possible. Right now I have it set to 1024 and the search icon wraps before it collapses, which is well before the menu runs into the logo/tag. Is there a way to reduce the buffer between the main menu and the logo/tagline area? Hopefully I am being clear. Web site is instant-g.com. Screen shot is at http://www.instant-g.com/OldRoot/buffer.JPG, pardon the primitive graphics. Thanks! Steve
Andrew Misplon Puro Feb 26, 2016 · 12:01 pm #3118 Hi timmins00
Thanks for reaching out.
Using a plugin like Simple Custom CSS, please, insert into Appearance > Custom CSS the following:
/* Header */
.site-header .site-branding-container {
max-width: 21%;
}
.main-navigation {
max-width: 79%;
}
Once you’ve installed Simple Custom CSS the Appearance > Custom CSS menu item will be available.
Hopefully the above helps 🙂
timmins00 Feb 26, 2016 · 12:46 pm #3119 Awesomeness. You even fiddled with the exact percentages! Thanks so much!
timmins00 Feb 26, 2016 · 12:48 pm #3120 Actaully..that changes things but does not do what I would like. Is it possible to do that as a hard pixel limit? What this did was maintain the padding and wrap the tag line.
Andrew Misplon Puro Feb 26, 2016 · 5:14 pm #3121 How about this:
1. Change your Custom CSS to:
/* Header */
.site-header .site-branding-container {
min-width: 236px;
max-width: 21%;
}
.main-navigation {
max-width: 79%;
}
2. Change the mobile menu collapse in Theme Settings to 936. Does that work for you?
Andrew Misplon Puro Feb 26, 2016 · 5:26 pm #3122 Topic moved to email. Thanks 🙂
