How can I change the navigation menu style to buttons in Dawn theme?

Store Design
, ,
1

Hi there,

I’m trying to mimic my my retired wix website but I’m unable to figure out how to change the style of the navigation menu.

Screenshot 2023-09-28 at 13.48.11.png
Screenshot 2023-09-28 at 13.48.11.png2852×292 110 KB

Here are the colour profules I’m after:

Text: #000000

Defult button colour: #F7ECCB
Button hover colour: #E8E8E8

Button colour when clicked:#F5F3EF

My site: https://977451-3.myshopify.com/

Password: poyuye

Someone sucesfully attempted this in the following post via code but that is not the style I want: :https://community.shopify.com/c/shopify-design/dawn-theme-menu-style-change-to-buttons/td-p/1932310

Is the above possible?

Thank you all for the help!

1 Like
2

Hi @Kulike96

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
ul.list-menu.list-menu--inline li {
    padding: 5px 50px 5px 50px;
}
ul.list-menu.list-menu--inline li:hover {
    background: #E8E8E8;
}
ul.list-menu.list-menu--inline li:active {
    background: #F5F3EF;
}
.header__active-menu-item {
    text-decoration: none;
}
.header__active-menu-item:hover {
    text-decoration: none;
}
.header__menu-item:hover span {
    text-decoration: none;
}
2 Likes
3

Amazing! Thank you so much; this is exactly what I wanted. I have two quick questions: Is it possible to make the button box touch the bottom of the header, as it does in the original design? If not, that’s fine. Also, ‘active’ color only appears for a split second when clicked and doesn’t stay highlighted in that color. Is there a way to make it stay highlighted when the relevant page is opened?

Thank you so much for the help!

1 Like
4

Hi,

Just add this code at the bottom of your base.css

.header {padding-bottom: 0px !important}

NatashaSaed_0-1695910609260.png
NatashaSaed_0-1695910609260.png1021×336 102 KB

1 Like
5

Yes, I was thinking of that but I just wait in your response.

Try this same instruction.

header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-localizations {
    padding-bottom: 0px;
}

And Save.

Result:

Made4uoRibe_0-1695910541308.png
Made4uoRibe_0-1695910541308.png843×213 42.7 KB

The clicked color, it needs a JavaScript code to obtain that one, youll need a developer then. That is why I used :active.

1 Like
6

Thank you very much for your fantastic assistance! I just have one more question (I promise it’s the last one): Is it possible to make the clickable area of the button cover the entire button container? Currently, the buttons only respond when clicking on the actual text, but I’d like it if we could click anywhere within the box to navigate to the relevant page.

I hope that clarifies things! I’d like it if we didn’t have to click only on the text to proceed.

Thank you!!!

7

Hello! I want to do this exact same thing however I would like the buttons to be image icons - Is this possible? Currently using Dawn Theme