Solved

How can I adjust menu item spacing and font weight in Dawn?

Dabou
Pathfinder
118 2 16

Hey everyone, im looking to remove the spacing between the menu items in my header, which appeared due to the dropdown arrow being removed.

Dabou_0-1707855749608.png


Also i would like to remove the font weight of the submenu items without affecting the main menu items

Dabou_1-1707855808646.png

 

My website can be found in my signature, thank you.

 

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
5527 1329 1638

This is an accepted solution.

Hi @Dabou 

Check this one. 

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:

 

summary#HeaderMenu-shop {
    padding-right: 1.2rem;
}
a#HeaderMenu-shop-sweatshirts {
    font-weight: normal;
}

 

AndSave. 

Result:

Made4uoRibe_0-1707856236164.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Made4uo-Ribe
Shopify Partner
5527 1329 1638

This is an accepted solution.

Yeah sure, Check the 2nd code on this one. 

 

.header__submenu .header__menu-item {
    font-weight: 100;
}

 

And Save. 

FYI, the padding on the right in your shop menu is 2.7rem. I make it same size on the other sides which is 1.2rem. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
5527 1329 1638

This is an accepted solution.

Hi @Dabou 

Check this one. 

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:

 

summary#HeaderMenu-shop {
    padding-right: 1.2rem;
}
a#HeaderMenu-shop-sweatshirts {
    font-weight: normal;
}

 

AndSave. 

Result:

Made4uoRibe_0-1707856236164.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Dabou
Pathfinder
118 2 16

@Made4uo-Ribe Would you be able to change the code so it would affect all submenu items, later ill add more.

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
Made4uo-Ribe
Shopify Partner
5527 1329 1638

This is an accepted solution.

Yeah sure, Check the 2nd code on this one. 

 

.header__submenu .header__menu-item {
    font-weight: 100;
}

 

And Save. 

FYI, the padding on the right in your shop menu is 2.7rem. I make it same size on the other sides which is 1.2rem. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Dabou
Pathfinder
118 2 16

@Made4uo-Ribe it didnt work

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
Made4uo-Ribe
Shopify Partner
5527 1329 1638

Please, refresh the browser. It visible on my side. 

Made4uoRibe_0-1707858823088.png

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Dabou
Pathfinder
118 2 16

@Made4uo-Ribe All worked, thanks for the help.

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579