Change color of category menu

[fabricgarden]

Hi

I have logged a couple of calls with helpdesk but they seem unable to tell me where I can change the color of the menu bar (from black). I have just installed a new responsiveness theme called Computerland and am trying to get it back to mimicing my previous layout and colors.

Help desk suggested "If you are trying to change the background of the menu you will have to download the image locally via FTP" - however there doesn't appear to be an image!

Any help would be appreciated.

[jleclair]

you're right. it's not an image

default_modified.css line 1332 is what you are looking for

ul#desktopMenu {
	margin: 0;
    padding: 10px 0;
	list-style: none;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px!important;
	font-weight: 500;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #3f3f3f; /* Old browsers */
	background: -moz-linear-gradient(top,  #3f3f3f 0%, #0b0b0b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(100%,#0b0b0b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #3f3f3f 0%,#0b0b0b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #3f3f3f 0%,#0b0b0b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #3f3f3f 0%,#0b0b0b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #3f3f3f 0%,#0b0b0b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */	
}

everywhere you see #3f3f3f and #0b0b0b replace with your appropriate colors.

[thecartdesigner]

I have logged a couple of calls with helpdesk but they seem unable to tell me where I can change the color of the menu bar (from black).

Help desk suggested "If you are trying to change the background of the menu you will have to download the image locally via FTP" - however there doesn't appear to be an image!

Any level of support should have taken literally a couple seconds to answer this CORRECTLY. But also pointing you in the wrong direction? Not good.

jleclair is correct on the rule.

You can also simplify it if you have solid colors and not gradients by using below instead:

ul#desktopMenu {
background: YOUR SOLID COLOR (e.g. #e20177);
border-radius: 5px;
font-family: "Open Sans",sans-serif;
font-size: 14px !important;
font-weight: 500;
list-style: outside none none;
margin: 0;
padding: 10px 0;
text-align: left;
}

-then to get all of your nav items on one line so its easier to view find the rule below in your active css file default_modified.css:

ul#desktopMenu li a {
color: #fff;
display: block;
font-size: 14px !important;
font-weight: 500;
padding: 0 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
text-transform: capitalize;
}

-CHANGE TO-

ul#desktopMenu li a {
color: #fff;
display: block;
font-size: 14px !important;
font-weight: 500;
padding: 0 5px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
text-transform: capitalize;
}

Hope this helps a bit more. Its not easy moving a design over when the navigation is going to another row. This should make it easier though.

Thanks,
Shaun

[fabricgarden]

jleclair & Shaun

Thanks for pointing me in the right direction - I will have a play and see what I can do.

Support seemed completely confused about this one.

[Toobusy]

They're not good at changing colors. I had the same experience.

[damiencaz]

Can anyone help us with this? We just simply want to add a background to the ul#desktopMenu (Top Desktop Menu Nav). We would love to have it gradient, but just a simple background for now would be okay. We can't figure this out and if anyone could help, that would be awesome. Thank you so much

[TangoPixel]

add this at bottom of your css
ul#desktopMenu { max-height: 100%; width: 100%; background: #ccc; }
You can change the background color to any color you want. ccc is gry.
if you want to change color of elements, add this to your css by replacing with the color of your choice
ul#desktopMenu li a{color:#000;}