Jump to content

Almar - How to force hamburger in all media sizes/ link to #id in navigation folder

Recommended Posts

Posted

Site URL: https://khaki-caper-j2pm.squarespace.com/

Hi,

I'm trying to work out how to force the hamburger to appear on all media screen sizes but not having much luck. Password is "password" https://khaki-caper-j2pm.squarespace.com/

The site I'm working on is private at this stage but the above link is a representation of my nav bar.  As you can see there are quite a lot of menu items - hence my desire to put them all in the hamburger. Another option would be to use a navigation folder, but It's forcing me to use a page slug ,but there will be no child pages as the site will be a single page with anchor links to #ids further down the page. Is there any way to link a navigation folder to an #id?

So two questions:

1. How can I make the hamburger display all the time?

2. How can I make the navigation folder link to an ID further down the page?

Any help would be fantastic :)

  • Replies 3
  • Views 683
  • Created
  • Last Reply
Posted

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
13 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

Thanks very much for this. 

  • Do you know how I'd be able to get the "get started" button to display to the left of the burger icon instead of in the drop down? - on desktop only.
  • Do you know how I'd be able to shrink the expanded burger dropdown (on desktop only) so it doesn't display full screen on desktop, but rather a traditional drop down style?
  • 4 weeks later...
Posted
On 8/6/2020 at 9:18 AM, darth_morgan said:

Thanks very much for this. 

  • Do you know how I'd be able to get the "get started" button to display to the left of the burger icon instead of in the drop down? - on desktop only.
  • Do you know how I'd be able to shrink the expanded burger dropdown (on desktop only) so it doesn't display full screen on desktop, but rather a traditional drop down style?

Do you still need help? I will give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Archived

This topic is now archived and is 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.