Jump to content

Burger Menu Desktop Version

Recommended Posts

  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi Saranya. Thanks for your reply. 
 

You can see it here: www.byandreavaldes/about
 

The issues I'm facing are:

1. Desktop version: menu options do not appear

2. Mobile: The menu has been divided in half as programmed in the code, however I'd like the burger menu to be full screen in the mobile version.

 

Do you know what I might be doing wrong?
 

Here's the code I used:

.header-nav, .header-actions {

  display: none;

}

.header-burger {

  display: flex;

}

.header--menu-open .header-menu {

visibility: visible;

  opacity: 1;

}

.burger-box {
    width: 24px;
}

  .header-menu {
  min-width: 50%;
  max-width: 35%;
  width: 100%;
    }

Link to comment

@byandreavaldes ok yeah this template is complicated. It looks like there is some javascript at work here... for one, it's auto-adding some padding to the header based on screensize which is why the menu doesn't appear in desktop, so you need to override that, something like:

.header--menu-open .header-menu {
	padding-top: 80px !important;
}

...but then the menu is all rotated... I played around with trying to un-rotate it, but it becomes very complicated and layered very quickly...

Regarding making the mobile menu full width, you can add this as well:

.site-wrapper .header-menu .header-menu-bg {
	width: 100vw;
}

But the expandable services submenu is still displayed at all times, which I assume is not what you want?

I looked for some of the CSS you've already added, but some of it looks like it's not being picked up, so you may need to check your selectors?

Overall I would probably recommend hunting around for a theme/template that starts with a burger menu in desktop mode, as you may be trying to fit a square peg in a round hole with this particular one given how it's built. I think it will require some heftier custom coding, as it seems a lot to overcome with just CSS... sorry!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.