How can I alter the form of header buttons on my website?

Store Design
1

Hello! I am designing a shop and I want to change the form of the buttons in the header. As you see from the screenshot, now I have three buttons and when one is selected, it is underlined.

Screenshot 2022-09-22 at 17.04.44.png
Screenshot 2022-09-22 at 17.04.44.png1976×124 5.55 KB

What I want to do is to make these menus (Home/Catalog/Contact/etc) be encircled into an oval-form button and to remove the underlining. How can I do that? I presume some code is needed, but I don’t know exactly which one.

2

Hi @d_reinicke ,

Thank you for reaching out to the Shopify Community!

Please share your store URL here so we can check it for you.

Thanks & Regards,
Ahsan ANC

3

Sure, sir.

The website is https://project-avignon.myshopify.com/

The password protection is meolyo

Thank you in advance for your help :slightly_smiling_face:

4

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
@media only screen and (min-width: 768px){

.header__active-menu-item{
   text-decoration: none;
}
.header__menu-item:hover span {
    text-decoration: none;
	}
	
	.list-menu__item{
	    border: 2px solid #fff;
    border-radius: 16px;
    margin: 0 10px;
    padding: 10px 20px;
	}

}
1 Like
5

Thank you again for your help! Regarding the same topic, I also wonder what should I do in order to change the inner filling of these buttons and to change the colour of the text inside these particular buttons SOLELY.

I would highly appreciate if you sent another piece of code, which changed the filling to white and the text to black (but only inside buttons).

6

Ahsan, I have also just noticed that some other buttons in the bottom of the page obtained the same design feature as the buttons in the header. How could we remove that?

Screenshot 2022-09-22 at 18.46.29.png
Screenshot 2022-09-22 at 18.46.29.png1050×284 4.42 KB

7

please add this code

@media only screen and (min-width: 768px){
.list-menu__item{
  background: #fff;
    color: #000;
}
.header__menu-item:hover span{
   color: #000;
}  
span.header__active-menu-item {
    color: #000 !important;
}
}
8

please remove all the code that you added earlier add this new code

@media only screen and (min-width: 768px){

.header .header__active-menu-item{
   text-decoration: none;
    color: #000 !important;
}
.header .header__menu-item:hover span {
    text-decoration: none;
	color: #000;
	}
.header .list-menu__item{
	    border: 2px solid #fff;
    border-radius: 16px;
    margin: 0 10px;
    padding: 10px 20px;
	}
.header .list-menu__item{
  background: #fff;
    color: #000;
}}
1 Like
9

Tried this one. I’m afraid it won’t change anything with the buttons.

10

Now it works, with the latest version of the code!

Thank you very much again, Ahsan!

–

Issue resolved