What's your biggest current challenge? Have your say in Community Polls along the right column.

Making dropdown menu different color

Solved

Making dropdown menu different color

manoman
Pathfinder
134 1 22

Hello.

 

As the title says I would want to change the color of my dropdown menu. If you can help me with this, please leave a reply and I will PM you the site URL as I want to stay anonymous. Thank you so much!

Accepted Solutions (2)
Made4uo-Ribe
Shopify Partner
9165 2186 2702

This is an accepted solution.

The solution, that I can think for them to have a same line is make your header max-width: 100%; 

I'll sned you the SS by pm. And I add the code here. 

 

store-header.header .container {
    max-width: 100%;
}

 

And Save. Same instruction. 

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Made4uo-Ribe
Shopify Partner
9165 2186 2702

This is an accepted solution.

Check this one for the menu, paste on the same area be careful you dont mess the brackets and signs.

a.header__linklist-link.link--animated {
    font-size: 16px;
    letter-spacing: -1px;
}
[dir="ltr"] .header__linklist-item:not(:last-child) {
    margin-right: 25px;
}

And Save. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
9165 2186 2702

Hi @manoman 

What color do you have in mind? If its same on the header, you need to change the text color also. 

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:

 

.nav-dropdown:not([hidden]) {
    background: rgb(var(--header-background));
    color: rgb(var(--header-text-color));
}

 

And save. 

That is same color on the header. 

 

.nav-dropdown:not([hidden]) {
    background: red;
}

 

If you like another color without changing the text color. 

No result. 😆

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
manoman
Pathfinder
134 1 22

Thanks for the reply. I want to make the box black when you hover over, that is the only change I want, since the rest is white it would look better if the drop down hover box is black, with white text, rest I want the same. Do you have my URL? 🙂

Made4uo-Ribe
Shopify Partner
9165 2186 2702

Yeah, I still have. Check the first code that I give. 

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
manoman
Pathfinder
134 1 22

Did not work for me?

I paste this: .nav-dropdown:not([hidden]) {
background: rgb(var(--header-background));
color: rgb(var(--header-text-color));
}

in bottom of theme.css and nothing happen

Made4uo-Ribe
Shopify Partner
9165 2186 2702

Check this one then. Paste on the header > cusmto css on the right side. Also change the color you like. 

 

.nav-dropdown:not([hidden]) {
    background: red !important;
    color: white !important;
}

 

And Save. 

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
manoman
Pathfinder
134 1 22

Maybe if its possible to make it so that all the dropdown menus are on the same line, as you can see ''Biverkningar & Åld'' is under them, can I change that, maybe make it smaller so that they are all on the same line? I might like that more. Thanks!

Made4uo-Ribe
Shopify Partner
9165 2186 2702

This is an accepted solution.

The solution, that I can think for them to have a same line is make your header max-width: 100%; 

I'll sned you the SS by pm. And I add the code here. 

 

store-header.header .container {
    max-width: 100%;
}

 

And Save. Same instruction. 

 

 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Made4uo-Ribe
Shopify Partner
9165 2186 2702

This is an accepted solution.

Check this one for the menu, paste on the same area be careful you dont mess the brackets and signs.

a.header__linklist-link.link--animated {
    font-size: 16px;
    letter-spacing: -1px;
}
[dir="ltr"] .header__linklist-item:not(:last-child) {
    margin-right: 25px;
}

And Save. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
manoman
Pathfinder
134 1 22

Thank you brother