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

Danmuges
Excursionist
37 0 6

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

Replies 6 (6)

zack_dev
Shopify Partner
75 14 10

 

<style>
nav.header__inline-menu ul li a, nav.header__inline-menu ul li span {
    color: black !important;
    text-decoration: unset;
    font-weight: bold;
}
nav.header__inline-menu ul li {
    background: #DBFF25;
    border-radius: 12px;
    margin: 3.3px;
    color: white;
}

</style>

 

 

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

will look like Screenshot_5.png



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

Spac-es
Shopify Partner
346 101 122

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

Tablets Result:result2.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

Danmuges
Excursionist
37 0 6

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

Spac-es
Shopify Partner
346 101 122

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

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Danmuges
Excursionist
37 0 6

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

 

Spac-es
Shopify Partner
346 101 122

 

Change this value to adjust the vertical height:

top: 121%;

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!