aurevoir_blu Posted March 8, 2021 Share Posted March 8, 2021 Site URL: https://emu-maracas-4rxy.squarespace.com/ Hi I'm trying to create a folder navigation box for the drop down links. I'm using this code: // Rounded Corners Folder Menu // .header .header-nav .header-nav-item--folder .header-nav-folder-content { border-radius: 20px; } But the drop down box background isn't showing up. The links aren't visible, and only show up when I hover over the link. I'm also using this additional styling on the navigation. Could it be interfering with the code? // Solid Pill Nav On Hover // .header-nav-item a { padding: 0px 10px !important; } .header-nav-item a:hover { background-color: #809DB3 !important; color: #ffffff !important; border-radius: 50px !important; padding: 0px 10px !important; background-image: none !important; } // Pill Active Nav // .header-nav-item--active a { background-image: none !important; background-color: #809DB3; color: #ffffff !important; border-radius: 50px !important; padding: 0px 20px !important; } Link to comment
ghostplugins Posted March 9, 2021 Share Posted March 9, 2021 @aurevoir_blu We weren't able to view your website since it's set to private, but be happy to jump in! We tested the exact code above and didn't experience any issues, so please check your color palette settings. The color background set for the header's color palette will also apply itself to the folder's color. So if the background is set to white and the folder links are set to white, you won't see anything. Below is a screenshot of what we are seeing in our test. The code above wouldn't affect the folder's color in anyway, so again, please check color palette settings. Sound be an easy adjustment! 👍 milan and aurevoir_blu 2 Cody and Team, The Ghost Co. 👻 Ghost Plugins: 500+ free plugins and templates for Squarespace🎉 Ghost Marketplace: The very first product-based marketplace for Squarespace💙 Circle Story: Thank you, Squarespace! Link to comment
aurevoir_blu Posted March 9, 2021 Author Share Posted March 9, 2021 Hey @ghostplugins Thanks for the reply! I checked out the site styles and I'm not sure if I'm looking at the right section. This is what it's set to: Header - Navigation Links #000000 Menu Overlay - Background (Custom color) I've made the page visible. Password is: clearmission Link to comment
ghostplugins Posted March 9, 2021 Share Posted March 9, 2021 (edited) @aurevoir_blu Menu overlay is going to be mobile menu's background color. You're going to want to look for "Section Background". Screenshot attached. I did do a quick inspect and it looks like Squarespace now applies the "active" behavior to all of the pages in the folder since you're active within th e folder's content. I'll share this with my team in case there is room for adding additional notes or code to the free plugin. In the meantime, you can use this additional CSS if you want to target the folder color specifically so it doesn't apply the site styles "Section Background" color universally. // Folder Menu Color // .header .header-nav .header-nav-item--folder .header-nav-folder-content { background-color: #82ca9c !important; } Edited March 9, 2021 by ghostplugins milan, aurevoir_blu and tuanphan 2 1 Cody and Team, The Ghost Co. 👻 Ghost Plugins: 500+ free plugins and templates for Squarespace🎉 Ghost Marketplace: The very first product-based marketplace for Squarespace💙 Circle Story: Thank you, Squarespace! Link to comment
aurevoir_blu Posted March 9, 2021 Author Share Posted March 9, 2021 Hi @ghostplugins That worked! Grateful again for your attention on this and for providing a quick solution. Great work Thanks Link to comment
tuanphan Posted March 20, 2021 Share Posted March 20, 2021 On 3/9/2021 at 8:16 AM, aurevoir_blu said: Hey @ghostplugins Thanks for the reply! I checked out the site styles and I'm not sure if I'm looking at the right section. This is what it's set to: Header - Navigation Links #000000 Menu Overlay - Background (Custom color) I've made the page visible. Password is: clearmission Hi. On mobile I see this issue You can add this to Custom CSS to center 2 buttons /* Align mobile buttons */ @media screen and (max-width:767px) { div#block-dcd76285d715311e22b4 + .row * { text-align: center; } } aurevoir_blu 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
aurevoir_blu Posted March 22, 2021 Author Share Posted March 22, 2021 Thanks so much @tuanphan!! That was incredibly helpful. I'm grateful for your attention on this! Many thanks 🙂 tuanphan 1 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