Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Rounded Corners Folder Navigation


Question

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

6 answers to this question

Recommended Posts

  • 0

@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: 350+ free plugins and installed-for-you templates resource
🎉 Ghost Marketplace (Coming Soon): First-ever Squarespace product related marketplace

📰 Read my Circle Member Community Story (thank you, Squarespace!)

Link to comment
  • 0

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
  • 0

@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: 350+ free plugins and installed-for-you templates resource
🎉 Ghost Marketplace (Coming Soon): First-ever Squarespace product related marketplace

📰 Read my Circle Member Community Story (thank you, Squarespace!)

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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