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

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


loelife

Question

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)

561735709_ScreenShot2022-04-26at3_42_01PM.png.5e95816c13de98228794c8cff287f6bf.png

54035672_ScreenShot2022-04-26at3_42_29PM.png.09897fd43a637a882cfbf65e96701fd9.png

350479812_ScreenShot2022-04-26at3_54_07PM.png.d8c54f38e9fd61eb8a2073b999a4f27d.png

Edited by loelife
Link to comment
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 1

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

 

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

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

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

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

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

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

 

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
  • 0
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.1752584130_ScreenShot2022-05-16at12_45_44PM.thumb.png.65e2df081a83f25728c98c72c110d025.png

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

 

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

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

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

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