EmilyLewis Posted October 2 Share Posted October 2 Site URL: https://aldarull.squarespace.com/ Hey all, My client would like her menu to be situated the bottom left of the screen and numbered. Here's a picture of the mockup. Please can someone help me with creating code for this? Or if its possible? Thanks in advance! Emily Emily Lewis Founder of TwoFold Squarespace websites for interior designers and architects twofold-studios.com Link to comment
Ziggy Posted October 2 Share Posted October 2 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
EmilyLewis Posted October 3 Author Share Posted October 3 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 EmilyLewis Posted October 4 Author Solution Share Posted October 4 (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 October 4 by EmilyLewis Emily Lewis Founder of TwoFold Squarespace websites for interior designers and architects twofold-studios.com Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment