Jump to content

Desktop burger overlay positioning

Go to solution Solved by Ziggy,

Recommended Posts

Site URL: https://www.lapseofficialfilm.com/

Hello!

I'm helping with a friend's site and am trying to get the burger overlay to be fully visible - right now, the top of the navigation is lined up with where the burger is. I suspect this would also eliminate the scrollbar, which would be great.

This is the custom CSS I have in place so far:

/*navigation burger*/
.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}
\

#header #headerNav {
    display: block;
    text-align: left;
    vertical-align: bottom;
}
.header-inner {
  display:block;
}


/*burger position*/
.header-burger {
    position: absolute;
    bottom: 0;
    left: 11px;
}

/*logo height*/
.header-title-logo img {
    max-height: 500px;
}

Any and all suggestions welcome! Thanks!

Link to comment
  • Solution

This should remove the top padding that is pushing the menu down, and yes, it should hide the scrollbar:

div.header-menu .header-menu--folder-list {
  padding-top:20px !important;
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
9 minutes ago, Ziggy said:

This should remove the top padding that is pushing the menu down, and yes, it should hide the scrollbar:

div.header-menu .header-menu--folder-list {
  padding-top:20px !important;
}

 

Thanks @Ziggy! Unfortunately it doesn't seem to be doing the trick - it's in now and looks the same, even when I try adjusting the padding size.

Edited by priorpriorwalter
Link to comment

Yes, that seems to not want to affect the padding, this isn't as good a solution, with a negative margin, but it should work:

.header--menu-open .header-menu {
    margin-top: -550px;
}

You may have to adjust the px to suit

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

It's not removed the links, they have gone behind the header and are not visible to click on, I'll see if I can find a solution to that z-index problem.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

I'm hoping that this CSS uncovers the links:

.header-inner, .header .header-announcement-bar-wrapper .header-border, .header .header-announcement-bar-wrapper {
    width: 100px;
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.