Sonora - How to force hamburger in all media sizes

Hi,Been trying to force hamburger in all media sizes (from mobile to desktop) in the Sonora template, similar to what was done with the bedford template (see link below). The bedford css doesnt work, and having looking at the code for Sonoma I can't figure out what to alter.

Does anyone know the css which will force the hamburger to replace the menu text?

Link to bedford answer:https://answers.squarespace.com/questions/40098/bedford%3A-how-to-force-mobile-navigation-icon,-%E2%80%98hamburger,-at-all-times.html

Hi @dangermouse

You should be able to replace it by hiding the main headers (top and bottom) and always showing the mobile bar. Try adding this to Design > Custom CSS:

/* Replace the desktop nav with the mobile nav */
[data-nc-base="mobile-bar"] {
 display: block;
}
.Header {
 display: none!important;
}

You didn't provide a link to your site but I tested it on the Sonora demo site.

Paul

To everyone! If you find this (or any) answer helpful, please vote it up using the up arrow. This will let other users know it's a good answer. You'll find some more Squarespace tips on our website.

hi @paul2009

do you know how to make the hamburger icon appear to the right, left justified, next to an image based logo? I'm using flatiron?

also, do you know how to reduce the space on mobile, from the bottom of the hamburger to the top of the logo?

Thanks @Paul2009. Worked perfectly, and looks great.

I ran into one issue which was a loss in banner height but added the following code to correct for the loss in banner image height.

/*Increase banner image height across all screen sizes */

.Intro--has-image .Intro-content { position: relative; z-index: 2; padding-top: 340px; padding-bottom: 340px}

@media screen and (max-width: 1280px) { .Intro--has-image .Intro-content { padding-top:280px; padding-bottom: 280px }}

@media screen and (max-width: 960px) { .Intro--has-image .Intro-content { padding-top:220px; padding-bottom: 220px }}

@media screen and (max-width: 640px) { .Intro--has-image .Intro-content { padding-top:120px; padding-bottom: 120px }}

@Paul2009

Thanks for your previous reply. I am running into the issue when the nav/mobile menu is open the text is too small on a large screen. I was wanting to customize the overlay menu when you click on the hamburger to look more like what they use on this site http://xn--httehut-n2a.com/

Would this be an easy change to make to the sonora mobile menu css?

Thanks, Mike

@Paul2009

Thanks for your previous reply. I am running into the issue when the nav/mobile menu is open the text is too small on a large screen. I was wanting to customize the overlay menu when you click on the hamburger to look more like what they use on this site http://xn--httehut-n2a.com/

Would this be an easy change to make to the sonora mobile menu css?

Thanks, Mike

I'd love to find the answer as well, I'm using the Farro template, and seems to use the same style of showing/hiding the hamburger menu.

Trying to show the hamburger button always on the top left

I can see that the hamburger menu is here:

<button class="Mobile-bar-menu" data-nc-element="menu-icon" data-controller-overlay="menu" sqs-controller="MobileOverlayToggle" sqs-controllers-binded="MobileOverlayToggle">
       <svg class="Icon Icon--hamburger" viewBox="0 0 24 18">
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/ui-icons.svg#hamburger-icon--even" class="use--even"></use>
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/ui-icons.svg#hamburger-icon--odd" class="use--odd"></use>
       </svg>
     </button>

Any advice?

Thanks!!

Hi @Paul2009

Sorry for dropping in on an old post but I wanted to ask how I could force the desktop nav menu to appear in all display modes rather than the hamburger icon.

I am using the Brine template and the custom CSS above works perfectly to force the hamburger icon in every view. I have tried to alter it myself to force desktop nav in every view but haven't had any sucess.

Any help would be greatly appreciated.

P.S. This is my site

https://sponge-chicken-sr75.squarespace.com