How can I make header links appear as buttons?

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

Hi Ifra,

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

Thanks,
Victoria

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

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

-Victoria