How can I alter menu buttons in the Dawn theme for better aesthetics?

Store Design
, , ,

Topic summary

A user seeks to improve the visual appearance of menu buttons in the Dawn theme, which currently appear as plain text on a black background.

Solutions Provided:

  • zack_dev suggests adding code to theme.liquid (specific code appears corrupted in the thread)
  • Spac-es provides two CSS solutions:
    1. Add styling to base.css targeting ul.list-menu.list-menu--inline to reposition the menu with absolute positioning and background color
    2. Add .header__menu-item styling to make text white and bold, with customizable font-family

Follow-up Adjustments:

  • User requests bolder, whiter text for better contrast
  • Spac-es provides additional CSS for font-weight and color customization
  • User asks about vertical positioning; Spac-es advises adjusting the top: 121% value to control menu placement

The thread includes before/after screenshots showing the visual improvements. The discussion remains open for further refinement based on the user’s aesthetic preferences.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

I’m not happy with the menu buttons on my website. It just looks like text floating on the black background. Is there any way I can change this to make it look more aesthetically pleasing?

Thankyou in advance

www.oasiscoral.com.au

Danmuges_0-1712930064992.png
Danmuges_0-1712930064992.png1572×741 306 KB

2

place this code on theme.liquid bottom see it it helps design.

will look like

Screenshot_5.png
Screenshot_5.png1919×710 396 KB

3

Add this code in your base.css file:

ul.list-menu.list-menu--inline {
  position: absolute !important;
  width: 100% !important;
  left: 0;
  top: 121%;
  background-color: #000000a3;
}

PC Result:

result.PNG
result.PNG1882×634 253 KB

Tablets Result:

result2.PNG
result2.PNG1043×696 523 KB

4

Thankyou but is it also possible to make the writing white on the original? Possibly more bold.

5

Add this other code:

.header__menu-item {
  color: #ffffff !important;
  font-weight: bold;
  font-family: system-ui;
}

change the color to your preference!

Result:

result3.PNG
result3.PNG1528×797 337 KB

6

Thanks. Can I see what it looks like above the picture?

1 Like
7

Change this value to adjust the vertical height:

top: 121%;