Jump to content

Navigation custom CSS icon on hover and active

Go to solution Solved by Evamaerketing,

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.

Edited by Evamaerketing
Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

@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)

Edited by tuanphan
Initial Revision

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

Edited by Evadresscode
hide logo
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. 

Edited by Evadresscode
readability
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

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

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.