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

Navigation custom CSS icon on hover and active

Question

Posted (edited)

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

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0
Posted (edited)

Tuan's second help did the trick!!! Thank you so much @tuanphan.

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

Edited by Evamaerketing
Initial Revision

Share this post


Link to post
  • 1
Posted (edited)

@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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...