Nav CSS (Link color, Folder dropdown size, Active Link in Folder, animation)

Site URL: https://wombat-gerbil-7tj5.squarespace.com/

PW: Ziggy445748

Hi, I know these are a lot but I'm happy with whatever solutions there are to one or any of these issues

currently working on my styling for my portfolio and need help with Nav CSS (Current CSS image attached):

1. I want "Linkedin" to be colored Blue (#0072B1)

2. Folder in nav has three issues

a) Dropdown box is too big. I want the box size to fit the links within

b) When one of the "Other Work" pages is active, both sub-pages are highlighted red. Would like active color on on one or the other (whichever is active at the time)

c) Would love a "drop-down" animation for the folder content box.

Thank you! (images below)

Hi,

Add to Design > Custom CSS

header#header [href*="linkedin"] {
    color: #0072b1;
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}
div.header-nav-item--active a {
    color: black !important;
}
div.header-nav-folder-item--active a {
    color: #900 !important;
}

On 4/29/2022 at 5:32 AM, tuanphan said:

Hi,

Add to Design > Custom CSS

header#header [href*="linkedin"] {
    color: #0072b1;
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}
div.header-nav-item--active a {
    color: black !important;
}
div.header-nav-folder-item--active a {
    color: #900 !important;
}

 

Thank you! Any way to have the 'Other Works' header in active color when one of the folder items is active as well?

On 5/4/2022 at 3:11 AM, loelife said:

Thank you! Any way to have the 'Other Works' header in active color when one of the folder items is active as well?

It looks like you solved it?

On 5/5/2022 at 10:21 AM, tuanphan said:

It looks like you solved it?

Sorry for the delayed response. As of now two things happen: Either the folder items have active color individually but no main nav links will have the active color, or the main links will have active color and the folder contents with both be marked as active at the same time. If you look on the page now, the active color is working but both folder links are marked active at the same time

On 5/11/2022 at 12:27 AM, loelife said:

Sorry for the delayed response. As of now two things happen: Either the folder items have active color individually but no main nav links will have the active color, or the main links will have active color and the folder contents with both be marked as active at the same time. If you look on the page now, the active color is working but both folder links are marked active at the same time

You mean when users on this page 

https://wombat-gerbil-7tj5.squarespace.com/visual-design

Which item will need to change color?

11 hours ago, tuanphan said:

You mean when users on this page 

https://wombat-gerbil-7tj5.squarespace.com/visual-design

Which item will need to change color?

Thank you for the response!

So When a page is active, it goes red. What I'm looking for is when the "Other Work" Page is open, I would like "Other Work" in active color as well as whichever link in the folder ("Visual design" When they are on that page or "Music" when they are on that page) if that makes sense

On 5/14/2022 at 2:14 AM, loelife said:

Thank you for the response!

So When a page is active, it goes red. What I'm looking for is when the "Other Work" Page is open, I would like "Other Work" in active color as well as whichever link in the folder ("Visual design" When they are on that page or "Music" when they are on that page) if that makes sense

First, remove this code

div.header-nav-item--active a {
    color: #ae4c4c !important;
}

and this

.header-nav-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}

and add this new code

.header-nav-item--active>a, .header-nav-folder-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}

On 5/15/2022 at 3:46 AM, tuanphan said:

First, remove this code

div.header-nav-item--active a {
    color: #ae4c4c !important;
}

and this

.header-nav-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}

and add this new code

.header-nav-item--active>a, .header-nav-folder-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}

I appreciate the help I'm still having the same issue. This is how it comes up when I'm on either the visual design page or the music page. Still trying to figure out how to have one link active and not the other while keeping "Other Work" Active.

For more reference, here's the full Nav Css:

/* Nav CSS */
    /* change header nav active style */
    .header-nav-item--active a {
          color: #AE4C4C !important;
          background-image: none !important;
    }
    header#header [href*="linkedin"] {
    color: #0072b1;
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
      border: 1px solid #BDBDBD;
}
.header-nav-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}
div.header-nav-folder-item--active a {
    color: #900 !important;
}
.header-nav-item--active>a, .header-nav-folder-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}
.scrollup {
     width: 40px;
     height: 40px;
     opacity: 0.3;
     position: fixed;
     bottom: 50px;
     right: 100px;
     display: none;
     text-indent: -9999px;
     background: url('Group 225.png') no-    repeat;
}
.boxBorder {
     border: 1px solid #BDBDBD;
     padding: 10px;
     outline-offset: 5px;
   }

On 5/16/2022 at 11:49 PM, loelife said:

 

Remove these code

/* change header nav active style */
    .header-nav-item--active a {
          color: #AE4C4C !important;
          background-image: none !important;
    }

and

.header-nav-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}

then add code I sent above

10 hours ago, tuanphan said:

Remove these code

/* change header nav active style */
    .header-nav-item--active a {
          color: #AE4C4C !important;
          background-image: none !important;
    }

and

.header-nav-item--active a {
    color: #ae4c4c !important;
    background-image: none !important;
}

then add code I sent above

I think we got it! Thank you so much!!!

Before the code kicks in, the default black font w/ underline flashes on the nav for a second. Is that normal?

Beyond that it's finally there. Thank you!!

6 hours ago, loelife said:

I think we got it! Thank you so much!!!

Before the code kicks in, the default black font w/ underline flashes on the nav for a second. Is that normal?

Beyond that it's finally there. Thank you!!

I think you try contacting SS Customer Care for this