Dropdown menu color

[Moshomedia]

Hi how i can change dropdown colour background

[ruenel]

Hello @Moshomedia,

Thanks for writing in!

To change the dropdown colour background,

.desktop .sub-menu,
.mobile .sub-menu {
  background-color: #eee;
}

Feel free to change the color that will fit with your site design.

[nazsect]

I am trying to change the backgorund color as well and this is not working.

[jade]

Hey @nazsect,

The code provided by @RueNel should work if you are using X and if there are no CSS errors in the Global CSS or any CSS code that is overriding it.

To verify if you have any CSS error, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

If no error is present, please provide the URL of the site in question so that we could check.

Thank you.

[albrecht]

Hi @nazsect,

I checked your site. The menu items can’t be seen because the navigation bar’s background color is the same color of the menu items.

If you are trying to change the color of the navbar. Please try this custom css.

.masthead .x-navbar {
    background: lightgray;
}

If you are trying to change the color of the menu items. Please try this custom css.

.masthead .x-navbar .desktop .x-nav > li > a {
    color: darkblue;
}

You can change the color to any color you like.

Hope it helps.

[nazsect]

@albrechtx

.masthead .x-navbar {
background: lightgray;
}

I apologize I thought this was clear, I want to change the background color for MOBILE phone only, not the desktop or tablet sizes

How do I do that?

[nazsect]

@albrechtx

Okay so I just about figured it out, but I still need assistance. This code gives me what I’m looking for, but I would like to remove the Black space above “HOME”. Any ideas on how I can remove that?

Changing the height cuts out everything from the Bottom going up, NOT the top down.

.mobile {
background-color: rgba(0, 0, 0,0.8) !important;
width: 100px;
height: 322px;
text-align:center;
font-size: 2em;
padding: 0px;
float:right;
}

[rubin]

Hey There,

Try following code:

.x-navbar .mobile .x-nav { margin-top: 0; }

All the best!

[nazsect]

Thank you Sir! That was the final missing piece. Final code is below for others who may need it!

.x-navbar .mobile .x-nav {
background-color: rgba(0, 0, 0,0.8) !important;
margin-top: 0px;
width: 100px;
height: 299px;
text-align:center;
font-size: 2em;
padding: 0px;
float:right;
}

[ruenel]

You’re welcome!
We’re glad we were able to help you out.