Rounded Corners Folder Navigation

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

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

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

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

Hi @ghostplugins

That worked! Grateful again for your attention on this and for providing a quick solution. Great work

Thanks

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

Thanks so much @tuanphan!! That was incredibly helpful. I'm grateful for your attention on this!

Many thanks 🙂