Jump to content

Align coded mobile menu icon with site logo in site header

Recommended Posts

I have created a custom hamburger and forced that menu on desktop too which so far works as I would like, however, the actual icon is sitting too far down the site. I would ideally like it to be in line with the logo but it doesn't show a block ID or section ID when using the SS ID finder. Anyone have any ideas how I can get it to line up?

Screenshot Capture - 2023-04-03 - 21-18-26.png

Link to comment

Can you share your website URL? Thanks!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Can you set and share a site wide password too? Thanks!

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Try this Custom CSS:

.burger-box {
    width: 120px;
    height: 120px;
}

The width may well override the 100px width property you already have, but I think the 120px works better.

Let me know if that works for you!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

No, I'm not sure, the width seems to be set to 40%, which might be the problem.

@media screen and (min-width: 768px) {
 .header-menu {
    width: 100%;
 }
}

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

What code did you use to achieve the mobile menu on desktop?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment
24 minutes ago, Ziggy said:

What code did you use to achieve the mobile menu on desktop?

/* Force burger on desktop */
  .header-burger {
    display: flex !important
}

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

.header-nav,.header-actions {
    visibility: hidden !important
}
@media screen and (min-width:768px) {
  .header-menu {
        right:unset;
        width: 100%;
    }
}
// CUSTOM HAMBURGER
/* Non-active burger */
.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/64274acdbbbb8e1c6b6d2120/t/642ab7fb3cda6b0a2c49f422/1680521211290/%2C%2C.png);
    background-size: 120px;
    background-repeat: no-repeat;
    background-position: right;
    background-color: transparent !important;
    display: block;
    width: 140px;
    height: 120px;

}
.burger-inner>div {
    display: none !important;
}
/* Burger when active */
body.header--menu-open .burger-inner:after {
    background-image: url(https://static1.squarespace.com/static/64274acdbbbb8e1c6b6d2120/t/642ab7fb3cda6b0a2c49f422/1680521211290/%2C%2C.png) !important;
}
.burger-box {
    width: 120px;
    height: 120px;
}
@media only screen and (min-width:768px) {
  .header .header-announcement-bar-wrapper {
    padding-left:2vw;
  }
  .header .header-burger {
    width:10vw;
  }
}

Link to comment

Can you re-share the password?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Password no longer works, which is why I was asking for it again, can you check it and reshare the password? Thanks.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Thanks.

I can't see any navigation links on the page or in the code, how many do you have in the pages menu?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Sorry to confirm, but the links are definitely in the Main Navigation section in the Pages menu?

image.thumb.png.3568a654ccbdad24ea543a1be68e2b70.png

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment
1 hour ago, FTWSGEM said:

Though, I do still seem to have that scroll bar on the far right which I can't seem to get rid of.

You can try adding this Custom CSS:

.header-menu-bg {
    overflow: hidden;
}

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Maybe with this:

.header-menu-bg {
    overflow: hidden !important;
}

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

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.