Jump to content

Sonora - How to force hamburger in all media sizes

Recommended Posts

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

Link to comment
  • Replies 8
  • Created
  • Last Reply

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


I post free answers because I want to help fellow Squarespace users - I'm not selling anything. In return please Accept an answer if it is correct. If it didn't help, feel free to ask for more help or wait for others to add their comments.

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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 }}

Link to comment

@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

Link to comment

@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

Link to comment
  • 1 month later...

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!!

Link to comment
  • 2 years later...

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.