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
  • Replies 6
  • Views 2.1k
  • Created
  • Last Reply

@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: Over 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for 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

Cody and Team, The Ghost Co.

👻 Ghost Plugins: Over 500+ free plugins and templates for Squarespace
🎉 
Ghost MarketplaceThe very first product-based marketplace for 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.