Jump to content

Brine Main Navigation Underline in Folder CSS

Recommended Posts

Site URL: https://mokshatransformation.squarespace.com/

Hello there, I am using the below code to create an underline effect on my main navigation.... (site password is: Moksha)

// Center Nav Line //
@media all and (min-width:770px){
header nav a{
  display: inline-block;
  float: none; 

header nav a:hover:after{
  transform: scaleX(1);

header nav a:after {
  content: '';
  border-bottom: solid 1px #cda05a;
    padding: .4em;
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  z-index: 999;

It works great until you get to the page titles within a folder. The width of this underline appears wider than the wording. Is there a way for this to be corrected? Just so the underline width is the same width as per the wording.

Many thanks in advance for any help. 

Screen Shot 2022-01-19 at 2.51.51 pm.png

Screen Shot 2022-01-19 at 3.13.53 pm.png

Screen Shot 2022-01-19 at 3.13.57 pm.png

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.