Change menu color with CSS

[Topshed]

Hi,
I want to change my menu color to Red for my londonbus site
I thought I could do it by modifing SM_clear but I have had no luck.

I can make some of the menu backgroundr Red but changing the text color to #fff; has me beat

My second tought was to try and use one of the many available in SM v6.0.4

Would that be an easier option perhaps

Your advice would be most welcome

Regards Topshed

[admin]

Hi, you need to edit the color declaration in the following rules:

/* Menu items
===================*/

	.sm-clean a {
		padding:12px;
		color:#555;
		font-size:18px;
		line-height:17px;
		font-family:'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Arial,sans-serif;
		text-decoration:none;
	}
	.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active,
	.sm-clean a.highlighted {
		color:#D23600;
	}

	/* ... */

	.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active,
	.sm-clean ul a.highlighted {
		color:#D23600;
		background:#eee;
	}
	/* current items - add the class manually to some item or check the "markCurrentItem" script option */
	.sm-clean a.current, .sm-clean a.current:hover, .sm-clean a.current:focus, .sm-clean a.current:active {
		color:#D23600;
	}

Also possibly the responsive styles further down in “sm-clean.css”:

/* Menu items
===================*/

	.sm-clean a {
		padding:13px 5px 13px 28px !important;
		color:#555 !important;
		background:transparent !important;
	}
	.sm-clean a.current {
		color:#D23600 !important;
	}

As for the old styles in v6.0.4, they are defined in a completely different way in the JS config file so they are not compatible at all.

Cheers!

[Topshed]

Thank you for your input, unfortunatly your CSS is the same as came with my original download, so there was no change of background or foreground colors

My only changes that have worked for me is in the font size in smclean a
see below

	.sm-clean a {
	/*	padding:10px;*/
		padding:5px;
		color:#555;
	/*  font-size:18px;*/
		font-size:12px;			
	/*  line-height:17px;*/
	    line-height:13px;
		font-family:'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Arial,sans-serif;
		text-decoration:none;
	}

I have a further thought,
Please, do you have a smart piece of code to let me load the menu at the top of every page with an include. it would fix all my problems and I could do away with Iframes which are doing my head in ??

Regards Topshed

[admin]

Please read carefully again what I wrote:

you need to edit the color declaration in the following rules

I just showed you the rules you need to edit, the colors you would like to use are up to you. If you need further help, please check the CSS spec.

You could use a server-side include for your menu structure so that you could keep it in a single separate file. For example, in PHP it could be achieved via the include function. If your server supports other server-side languages, please check how you could do it with those.

[Topshed]

I have my menu working in a Iframe, the Iframe is set to to 1280px wide and the menu fills the width of the Iframe

Calling the same menu at the top of a page produces the menu but it does not work

However the second example works if the iframe is present.
Loading the page on it’s own shows the menu but it does not work

Any thoughts a to why please

[Topshed]

whoops also tried

[admin]

If the menu HTML structure is in the following file:

/home4/topshed/public_html/smartmenus/lhc_clean.php

you could use the following on your PHP pages (they need to have a .php extension too) to include it:

<?php
	include '/home4/topshed/public_html/smartmenus/lhc_clean.php';
?>

If this doesn’t work, then you have something else that is not correctly configured but, unfortunately, I cannot guess what exactly it might be without looking at a complete code sample.

[AliE]

Hi,

Firstly ….. really like the menu !!

I’ve incorporated the “Simple” menu into my website. I wanted to change background and text colours and I used the notes posted here with some success. I managed to change Background and Text colours for the normal state menus and also for the hover state, however I am having more trouble changing the colours for the reduced size menus (responsive). I checked the rules posted above concerned with colour declarations, I have changed responsive normal state text colour but I really cant see why my background and hover states haven’t changed. Could you shed some light on this for me please ?

Thanks.

[admin]

Hi,

Glad you like the script!

The “sm-simple” theme doesn’t have hover styles for the responsive menu by default. I.e. you have just the following by default:

	.sm-simple a {
		padding-top:13px;
		padding-bottom:13px;
		background:transparent !important;
		color:#555 !important;
	}

If you like, you could add hover styles by editing the above like this:

	.sm-simple a {
		padding-top:13px;
		padding-bottom:13px;
		background:#fff;
		color:#555;
	}
	.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active,
	.sm-simple a.highlighted {
		background:#bbb;
		color:#fff;
	}

However, note that on mobile touch devices the hover effect is sticky and if you ask me it really works better without it.

Cheers!

[AliE]

Ahhhh …. thanks a lot. Too much going on in my head !! I never thought about hover status on a mobile ;( Of course you are right, and thanks very much for the advice.

[Author]

Posts