How can I make header links appear as buttons?

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

-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

Hi Ifra,

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

Thanks,
Victoria

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