[Resolved] Styling main navigation links

[Daniel]

Hey there,

I am trying to custom style the links in my main navigation. It’s a transparent header using the ‘Navigation as header’ I have used the Inspector to find out that the wrapping element of the main navigation is #site-navigation. Using display:none, the navigation disappears as expected. But it won’t apply any of the styles I am trying to apply to the menu. Namely I would like to add a thick underline behind the text on a:hover and a:active.
Here’s what I have atm (i found the attributes for the underline here: https://codepen.io/mikemai2awesome/pen/BIEgp and modified it for my needs)

$black: #000000;

#site-navigation a:hover {
  text-decoration: none;
  border-bottom: .0625em solid darken($black,10%);
  box-shadow: 0 -.25em 0 darken($black,10%) inset;
}

But apart from the underline code not working, no matter what I change, even if i just change the text-decoration it doesn’t apply to the nav links, even with !important.
I must be making a very basic mistake here, any help is greatly appreciated.

Thanks!

Daniel

[David]

Hi there,

its a little more complicated you would need to something like this:

.main-navigation .main-nav ul li a {
    border-bottom: 0.0625em solid #e5cae7;
    box-shadow: 0 -0.25em 0 #e5cae7 inset;
}

[Daniel]

Thanks David, that worked like a charm!
I went a bit further and removed the border-bottom attribute as that was actually not needed and adjusted the line-height of the links to get the positioning right. I had to basically set the space between the Navigation items very low ( in my case I set it to 5px but it could be set to 0 ) and then added a margin between them manually again, so the underline would not be wider than the actual text. My Nav is aligned right, so I set the margin-left.

If anyone reads this thread in the future, here’s the CSS I ended up with ( a bit of transparency on the black too ):

.main-navigation .main-nav ul li a{
line-height:1.3em;
margin-left: 30px !important;
}
.main-navigation .main-nav ul li a:hover {
    box-shadow: 0 -0.6em 0 #00000066 inset !important;
}
.main-navigation .main-nav ul li a:active {
    box-shadow: 0 -0.6em 0 #00000066 inset !important;
}

Thanks again!

[David]

Glad to hear that. Thanks for sharing.

[Author]

Posts