Navigation custom CSS icon on hover and active

Hi,
I use the Five template and adjusted my navigation to include an icon underneath the page name. The icon is hidden, but shows on hover. I would also like it to show without hover on the active page.This is the navigation I have now (I added spaces after every < to make the tags show):

< div class="navi">< div class="navitext">pagename< br>< /div>< i class="icon(through fontawesome) naviconpos">< /i>< /div>

CSS settings:

.navi {display: block; visibility: hidden;}
.navi:hover {visibility: visible;}
.navi:active {visibility: visible;}
.navitext {visibility: visible;}
.naviconpos {position: relative; left: 30%;}

It takes the active navigation color from squarespace site style. It seems .navi:active does not do anything. I tried !important on it, but that completely offset the hidden and position settings.
Thank you for any suggestions.

@Evamaerketing Try

.navi a:active i {visibility: visible !important;}

Thanks tuanphan. a:active is certainly a better try than mine. Unfortunately, it doesn't do anything either.

@Evamaerketing Can you share site url? I think i can solve with site url ;) (If you don't want to publish your site url, you can go to my profile, visit my site, and fill out the contact form in Menu Contact)

Thanks Tuan, I sent you an message via your contact form. I'm curious what you can do.

@Evamaerketing You can post CSS, Other members will know, and they can use it ;)

Hi there,

happy new year to unannounced Squarespace changes.

My custom navigation titles with icons in the row below the page name which would appear on hover and active worked well for a while, but now Squarespace changed something in their underlying template. Most html tags in the navigation like <div> and <br> don't work any more. To the contrary, they really mess up the site. For the moment I could add the icons in the same line with the page name, although I would like it to be centered in the line below and without any further distinction on hover or active. Without html tags, I don't know how to customize my navigation in CSS.

I add the screenshot, how I have it now and what happens if I try to add a <div> tag to the navigation title.

I used this format which I then customized with CSS:

< div class="v">< div class="x">pagename< br>< /div>< i class="icon(through fontawesome) np">< /i>< /div>

.v {
display: block;
visibility: hidden;
text-align: center;
}

.v:hover {
visibility: visible;
}

.x {
visibility: visible;
}

.np {
position: center;
}

li.page-collection.active-link i {
visibility: visible;
}

Thank you all for any hints in the right direction. 

49 minutes ago, Evadresscode said:

 

 

 

 

You should include link to your site. Difficult to help with only code.

I am getting closer in terms of styling, meaning getting the page name in one line and the icon in the second one and then centering both without using a < div> tag in the navigation . 

By using

.horizontal-navigation-bar nav ul li a { 
  padding: 1% 5% 2%;
  text-align: center;
  display: block;
}

I could get rid of < br> and < div class="np"> which overall makes the code a little lighter. 

I'm currently learning a lot. Eye opening. I have advanced as far as to learn that I did not need my ridiculous < div > tags in my navigation title, but work with squarespace's own classes.

I've been pretty much able to do what I wanted with these three pieces.

li.page-collection.active-link i {
    visibility: visible;
}
li.page-collection:hover i {
  visibility: visible;
}
li.page-collection i {
  visibility: hidden;
}

Now, I only have to find out how to get the icon in the second row and centered in my mobile navigation. It does not need to be hidden there. 

@tuanphan Hello!  You always have the answers, I hope you can help me today! I am trying to achieve a similar hover effect - but in Brine.

zetadesignstudio.com pw: brineintopedro

I currently have icons for navigation and on hover the navigation title reveals itself. I'm doing that using this CSS
 

.Header-nav--primary .Header-nav-item:nth-child(1), 
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(1) {
    color: transparent !important;
    background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711aaaa01fb707b844ef9/1611076010244/crescent-moon.png');
    background-repeat: no-repeat;
    background-size: 55px 55px; /* Size of the icon */
    background-position: center;
    padding: 30px 30px !important;
}

.tweak-header-primary-nav-hover-style-spotlight .Header-nav--primary:hover .Header-nav-item:nth-child(1) {
    color: #31393c !important;
	opacity: 1;
  /** TRANSITIONS
    transition: opacity 500ms ease-in-out;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;  **/
}

but I can't get the background-image to disappear, or understand how to make it disappear while ALSO leaving the title visible on hover only.

Do you have any help?? 🙏

On 1/22/2021 at 4:09 AM, HannahZoe said:

@tuanphan Hello!  You always have the answers, I hope you can help me today! I am trying to achieve a similar hover effect - but in Brine.

zetadesignstudio.com pw: brineintopedro

I currently have icons for navigation and on hover the navigation title reveals itself. I'm doing that using this CSS
 

.Header-nav--primary .Header-nav-item:nth-child(1), 
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item:nth-child(1) {
    color: transparent !important;
    background-image: url('https://static1.squarespace.com/static/5f986304f5bf2b148c8de70c/t/600711aaaa01fb707b844ef9/1611076010244/crescent-moon.png');
    background-repeat: no-repeat;
    background-size: 55px 55px; /* Size of the icon */
    background-position: center;
    padding: 30px 30px !important;
}

.tweak-header-primary-nav-hover-style-spotlight .Header-nav--primary:hover .Header-nav-item:nth-child(1) {
    color: #31393c !important;
	opacity: 1;
  /** TRANSITIONS
    transition: opacity 500ms ease-in-out;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;  **/
}

but I can't get the background-image to disappear, or understand how to make it disappear while ALSO leaving the title visible on hover only.

Do you have any help?? 🙏

It looks like you solved this?

On 1/23/2021 at 6:38 AM, tuanphan said:

It looks like you solved this?

@tuanphan thank you, yes I solved this!