[Resolved] Styling main navigation links

Home Forums Support Styling main navigation links

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1273402
    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

    #1273907
    David
    Staff
    Customer Support

    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;
    }
    #1273968
    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!

    #1273982
    David
    Staff
    Customer Support

    Glad to hear that. Thanks for sharing.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.