kyle00428 Posted December 28, 2021 Posted December 28, 2021 Site URL: https://rust-snail-j236.squarespace.com/ I'm using the Stretchy Line Navigation plugin from Ghost Plugins (quoted below). It works well for the top-level site navigation links, but I would like to also incorporate it into the links in the navigation folder as well. How do I add it to the menu items in the drop-down site menu? Access password: kyle .header-nav-item::after { content: ''; background: #000000; //color height: 2px; //thickness width: 0; display: block; margin-top: -7px !important; transition: width 0.2s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; }
Beyondspace Posted December 29, 2021 Posted December 29, 2021 5 hours ago, kyle00428 said: Site URL: https://rust-snail-j236.squarespace.com/ I'm using the Stretchy Line Navigation plugin from Ghost Plugins (quoted below). It works well for the top-level site navigation links, but I would like to also incorporate it into the links in the navigation folder as well. How do I add it to the menu items in the drop-down site menu? Access password: kyle .header-nav-item::after { content: ''; background: #000000; //color height: 2px; //thickness width: 0; display: block; margin-top: -7px !important; transition: width 0.2s; //animation speed margin: 0 auto; } .header-nav-item:hover::after { width: 100%; } .header-nav-item--active a { background-image: none !important; } Try adding to Home > Design > Custom Css .header-nav-folder-content .header-nav-folder-item { position: relative; } .header-nav-folder-content .header-nav-folder-item:after { content: ''; background: #000; height: 2px; width: 0; display: block; transition: width .2s; margin: 0 auto; left: 50%; transform: translateX(-50%); position: absolute; max-width: 100%; } .header-nav-folder-content .header-nav-folder-item:hover:after { width: 100%; } Let me know how it works on your site Support me by pressing 👍 if this useful for you BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> No-code customisations for Squarespace
Beyondspace Posted December 29, 2021 Posted December 29, 2021 My testing result 2021-12-29_11-58-22.mp4 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> No-code customisations for Squarespace
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment