Jump to content

Navigation custom CSS icon on hover and active

Recommended Posts

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.

Link to comment
  • Replies 12
  • Views 3.7k
  • Created
  • Last Reply
  • 5 months later...

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. 

 

 

Screen Shot 2020-01-03 at 17.41.36.png

Screen Shot 2020-01-03 at 17.42.50.png

Link to comment

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. 

Link to comment
  • 1 year later...

@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?? 🙏

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

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.