Add button in the "SHOP" menu ( Shopify Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I am using Shopify Dawn Theme. How do I add a button to the "SHOP" menu? I have added an image below. I want to keep it exactly like this. Please help me. Thank you.

Store: https://delicious-fruits-vegetables.myshopify.com/
Password: Admin

[BSS-TekLabs · Accepted solution]

<style>
a#HeaderMenu-shop {
    background: #DFAEA5 !important;
    color: white !important;
    border-radius: 5px !important;
    line-height: 6px !important;
}
#HeaderMenu-shop span {
    font-weight: 800 !important;
}
ul.list-menu.list-menu--inline {
    align-items: center !important;
}
</style>

Or this code if you want like this 

[BSS-TekLabs]

- Here is the solution for you @dreamtechzone_5 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
a#HeaderMenu-shop {
    background: red !important;
    color: white !important;
    border-radius: 5px !important;
    line-height: 12px !important;
}
#HeaderMenu-shop span {
    font-weight: 800 !important;
}
ul.list-menu.list-menu--inline {
    align-items: center !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

<style>
a#HeaderMenu-shop {
    background: #DFAEA5 !important;
    color: white !important;
    border-radius: 5px !important;
    line-height: 6px !important;
}
#HeaderMenu-shop span {
    font-weight: 800 !important;
}
ul.list-menu.list-menu--inline {
    align-items: center !important;
}
</style>

Or this code if you want like this 

[dreamtechzone_5]

It worked. Thank you very much. But when I add collection under "SHOP" the button doesn't show.

[Made4uo-Ribe · Accepted solution]

Hi @dreamtechzone_5 

We can do like this, check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

a#HeaderMenu-shop {
    background: #5fa800;
    color:  white;
    border-radius: 10px;
    padding: 1rem 1.2rem;
}

And Save. 

Result:

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

[dreamtechzone_5]

Great. It worked. 

The top and bottom width of the button can be reduced a bit?

[dreamtechzone_5]

Hello Sir!

When I click on "SHOP" menu the "SHOP" menu text color changes. I would like to keep it white.