Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
dangermouse

Sonora - How to force hamburger in all media sizes

Question

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

Edited by dangermouse
Initial Revision

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 3

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.


If a response has helped you, please give thanks using the  like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png button.
Need personalised help? I'm a professional Developer who works with Designers internationally. You can book me via my company's website. www.sf.digital

Share this post


Link to post
  • 1

@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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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

Edited by apollospil

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...