How can I make header links appear as buttons?

Answered

4 Comments

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi,

    Follow the steps below.  I am doing on Default Copenhagen Theme.

     

    1). Go to the header.hbs file and add the links the inside the nav-links. See how I did.

     

     

    2). Add the CSS to make the links button.

    @media (min-width: 768px){
    .nav-wrapper a{ //May be you have different classes
    border: 1px solid;
    padding: 5px 15px;
    border-radius: 4px;
    }
    }

     

    3). Output.

     

     

    Or you can share your HC public URL so I can share updated code with your theme's header classes.

     

    Team

     

     

    0
  • Victoria Campagna

    Hi Ifra,

    Thank you - here is our page:  https://customers.nastel.com/hc/en-us

    Thanks,
    Victoria

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Victoria , 

    Add the below code snippet to your stylesheet at the bottom:

      .nav-wrapper a{
    border:0;
    border-bottom:1px solid;
    padding:5px 0;
    border-radius:0;
    }

    @media(min-width:768px){
    .nav-wrapper a{
    border:1px solid;
    padding:5px 15px;
    border-radius:5px;
    }
    }

     

    Output:

    Desktop

     

    Tablet & Mobile

     

    Thanks

    0
  • Victoria Campagna

    Worked perfectly and looks awesome!  Thank you so much, Ifra :)

    -Victoria

    0

Please sign in to leave a comment.

Powered by Zendesk