• Ifra Saqlain

  • July 16, 2021 04:26

  Community Moderator

  

  

  

  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

   

   

• Victoria Campagna

  • July 16, 2021 13:21

  Hi Ifra,

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

  Thanks,
  Victoria

• Ifra Saqlain

  • July 16, 2021 14:05

  Community Moderator

  

  

  

  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

• Victoria Campagna

  • July 16, 2021 14:46

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

  -Victoria

Please sign in to leave a comment.