How Do I make the header menu buttons bigger and customize them?

Store Feedback
1

Hey Experts,

I want to make the menu button on the header (home, catalog, shop) bigger and i want them to have a black bubble behind them.

This is the picture of the current page. How can i make the Home, Catalog and Contact bigger?

IshaanD_0-1684692343885.png
IshaanD_0-1684692343885.png1104×140 21.2 KB

IshaanD_1-1684692429215.png
IshaanD_1-1684692429215.png1104×140 23.3 KB

This is how i want the buttons to look. How can I add a black bubble behind them or a black box behind them so there not plane.

Thanks,

2

To make the menu buttons on your header bigger and add a black background behind them, you can use custom CSS code. Here’s an example of how you can achieve this:

  1. Increase the size of the menu buttons:
.your-menu-class {
  font-size: 20px; /* Adjust the font size as per your preference */
}

  1. Replace .your-menu-class with the appropriate CSS class or selector for your menu buttons. You may need to inspect the HTML or check your theme’s documentation to find the correct class or selector for the menu buttons.

  2. Add a black background behind the menu buttons:

.your-menu-class {
  background-color: black;
  padding: 10px; /* Adjust the padding as per your preference */
  border-radius: 5px; /* Adjust the border radius as per your preference */
}
3

Hey!

Thanks for replying!

I’m new to shoplifty and I am a little confused on where I put the code. If you don’t mind can you please send me a screenshot or guide me on where I put thoose codes?

Thanks!