Jump to content

Using CSS to display hamburger menu on desktop and LOGO is now off-center

Go to solution Solved by lilyweitzman,

Recommended Posts

Good day. 

site password: lily

I inherited a site with CSS. Clients are interior designers and have a very particular aesthetic. Client noticed logo in header is slightly off-center. We are using CSS to display the hamburger menu on desktop (vs full navigation) which seems to be the culprit. Code pasted below and screen recording here: https://share.squarespace.com/p9uejpm8

 

CSS:

.header .header-burger{display:flex}

.header-nav, .header-actions {display:none}

.header--menu-open .header-menu { opacity: 1; visibility: visible;}

.header-menu-nav-item {

  line-height: 2em

}

@media screen and (min-width: 768px) {

  .header-menu-nav-item a {

    font-size: 2vmin;

  }

}

 

 

Edited by lilyweitzman
posted too soon
Link to comment

Looking at the website, I don't see the same slight offset of the logo that you're demonstrating in the video, is it only happening when you're logged in?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

Thank you to Ziggy for helping me to add the necessary padding to account for the hamburger menu.

 

//display hamburger menu on desktop

.header .header-burger{display:flex}

.header-nav, .header-actions {display:none}

.header--menu-open .header-menu { opacity: 1; visibility: visible;}

 

//modify menu font size

.header-menu-nav-item {

  line-height: 2em

}

@media screen and (min-width: 768px) {

  .header-menu-nav-item a {

    font-size: 2vmin;

  }

}

//padding to center logo

@media screen and (min-width: 768px) {

.header-title-logo img {

    padding-left: 47px;

}}

 

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.