Jump to content

Menu position bottom left

Go to solution Solved by EmilyLewis,

Recommended Posts

  • Replies 3
  • Views 462
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I'm not exactly sure how this design would work on other pages, but my first thought would be to look at this plugin which would place the header elements in the right place, then you would need to stack the navigation items vertically with a CSS tweak to the navigation flex box direction:

https://www.ghostplugins.com/products/p/four-corner-navigation (referral link)

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
19 hours ago, Ziggy said:

I'm not exactly sure how this design would work on other pages, but my first thought would be to look at this plugin which would place the header elements in the right place, then you would need to stack the navigation items vertically with a CSS tweak to the navigation flex box direction:

https://www.ghostplugins.com/products/p/four-corner-navigation (referral link)

That looks like a great plugin, thank you! GhostPlugins support team don't deal with customisations. Would you have any idea on how I would stack it if I did buy the plugin? 

     

Emily Lewis

Founder of TwoFold
Squarespace websites for interior designers and architects
twofold-studios.com

Link to comment
  • Solution
Posted (edited)
On 10/2/2024 at 6:29 PM, Ziggy said:

I'm not exactly sure how this design would work on other pages, but my first thought would be to look at this plugin which would place the header elements in the right place, then you would need to stack the navigation items vertically with a CSS tweak to the navigation flex box direction:

https://www.ghostplugins.com/products/p/four-corner-navigation (referral link)

Managed to do it with code without buying the plugin

@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 70%;
    left: 6%;
    padding: 0 !important;
    transform: translateY(-50%);
}

.header-nav-wrapper {
  text-align:left;
}

  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.1;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 4vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section.page-section {
    max-width: 75%;
    margin-left: 25%;
    padding-top: 0 !important;
}
}
 

Edited by EmilyLewis
     

Emily Lewis

Founder of TwoFold
Squarespace websites for interior designers and architects
twofold-studios.com

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.