Making dropdown menu different color

[manoman]

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!

[Made4uo-Ribe · 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!

[Made4uo-Ribe]

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!

[manoman]

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]

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!

[manoman]

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]

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!

[manoman]

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 · 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!

[Made4uo-Ribe · 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. 

[manoman]

Thank you brother