Jump to content

Rounded Corners Folder Navigation

Recommended Posts

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;
}
 

 

Navigation .jpg

Link to comment

@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! 👍

Screen Shot 2021-03-08 at 4.33.18 PM.png

Cody and Team, The Ghost Co.

👻 Ghost Plugins: 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace
💙 
Circle Story: Thank you, Squarespace!

Link to comment

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

@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;
}

 

Screen Shot 2021-03-08 at 5.38.26 PM.png

Edited by ghostplugins

Cody and Team, The Ghost Co.

👻 Ghost Plugins: 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for Squarespace
💙 
Circle Story: Thank you, Squarespace!

Link to comment
  • 2 weeks later...
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;
}
}

image.thumb.png.d12dd2bdbfbed2569192b9649137018f.png

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

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.