Different colors to menu items

  • Hello again ??

    My website is:
    https://www.mix-max.org

    I’m almost done with my website, I have just one more obstacle I cant get over myself.

    I want to make each of my menu items a different color (red – orange – yellow – green – blue to be precise) when you hover over it and when youre on the page. If not it should stay white. I was also thinking it would be nice to make the colors a bit faded for when you hover over it, and vivid and strong to indicate you are on the page. If you click through the pages you can also see the colors of the header change according to what color the menu item should be.

    I found the list item ID’s of the menu items are called:
    menu-item-43
    menu-item-527
    menu-item-95
    menu-item-441
    menu-item-91

    Does anyone know how I could make this work?

    thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter maxvkva

    (@maxvkva)

    This is the entire CSS code of the navigation:

    /*--------------------------------------------------------------
Menu
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	font-size: 0.73em;
	line-height: 1.3;
	font-weight: 900;
	text-transform: uppercase;
	background-image: url("https://www.mix-max.org/wp-content/uploads/2016/06/background-bwnav.png");
	padding-top: 5px;
	width: 100%;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	text-align: center;

}
.main-navigation ul li {
	display: inline-block;
	position: relative;
	margin-left: 8px;
	margin-right: 8px;

}
.main-navigation ul li a {
	display: block;
	padding-bottom: 7px;
	color: #24282d;
	text-decoration: none;
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
	color: white;
}
.main-navigation ul li a:hover, .main-navigation ul li a:focus, .main-navigation ul li a:active {
		color: red;
}
.main-navigation ul li:first-child {
	margin-left: 0px;
}
.main-navigation ul li:last-child {
	margin-right: 0px;
}
@media screen and (min-width: 960px) {
	.main-navigation ul li:hover > ul {
		display: block;
		opacity: 1;
		-webkit-animation: fade-in 250ms;
		-moz-animation: fade-in 250ms;
		-ms-animation: fade-in 250ms;
		-o-animation: fade-in 250ms;
		animation: fade-in 250ms;
	}
}
.main-navigation ul .current_page_item > a,
.main-navigation ul .current-menu-item > a {
	color: #e06d5e;
}
.main-navigation ul .genericon {
	position: absolute;
	top: -1px;
	right: 0;
	z-index: 9999;
	width: 40px;
	height: 40px;
	background: white;
	border: 1px solid #f1f2f3;
	color: #24282d;
	font-size: 24px;
	line-height: 40px;
	text-align: center;
}
.main-navigation ul .genericon.genericon-collapse {
	background: #e06d5e;
	color: white;
}
.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 9998;
	float: left;
	padding: 10px 0;
	margin-left: -100px;
	background: white;
	border: 1px solid #f1f2f3;
	text-align: left;
}
@media screen and (min-width: 960px) {
	.main-navigation ul ul {
		opacity: 0;
	}
	.main-navigation ul ul:before, .main-navigation ul ul:after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
	}
	.main-navigation ul ul:before {
		top: -5px;
		z-index: 2;
		border-right: 5px solid transparent;
		border-bottom: 5px solid white;
	}
	.main-navigation ul ul:after {
		margin-left: -1px;
		top: -7px;
		z-index: 1;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #f1f2f3;
	}
}
.main-navigation ul ul li {
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid #f1f2f3;
}
.main-navigation ul ul li:first-child {
	padding-top: 0;
}
.main-navigation ul ul li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.main-navigation ul ul a {
	padding: 0 10px;
	width: 200px;
	color: black;
}
.main-navigation ul ul ul {
	top: -1px;
	left: 100%;
	margin-left: -10px;
}
@media screen and (min-width: 960px) {
	.main-navigation ul ul ul:before, .main-navigation ul ul ul:after {
		display: none;
	}
}
.main-navigation .menu-toggle {
	display: none;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	margin: 0 0 0 -20px;
	width: 40px;
	height: 40px;
	background: white;
	color: #24282d;
	border: 1px solid #f1f2f3;
}
.main-navigation .menu-toggle .genericon {
	line-height: 40px;
}
.main-navigation.toggled .menu-toggle {
	background: #e06d5e;
	color: white;
}
@media screen and (max-width: 959px) {
	.main-navigation {
		position: relative;
		padding: 0;
		width: 100%;
		min-height: 40px;
	}
	.main-navigation:before, .main-navigation:after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		z-index: 0;
		height: 1px;
		background: #f1f2f3;
		padding-left: 0px;
		padding-right: 0px;
		margin-left: 0px;
		width: 100%;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	.main-navigation:before {
		top: 0;
	}
	.main-navigation:after {
		bottom: 0;
	}
	.main-navigation .menu-toggle {
		display: inline-block;
	}
	.main-navigation.toggled .menu-wrapper {
		padding-top: 40px;
	}
	.main-navigation.toggled .menu-wrapper:before {
		content: '';
		display: block;
		position: absolute;
		top: 39px;
		left: 0px;
		padding: 0 0px;
		width: 100%;
		height: 1px;
		background: #f1f2f3;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	.main-navigation.toggled .nav-menu {
		display: block;
		margin-bottom: -1px;
	}
	.main-navigation ul {
		position: relative;
		display: none;
		margin: 0;
		text-align: left;
		padding-left: 10px;
	}
	.main-navigation ul li {
		display: block;
		padding: 10px 0;
		margin: 0;
		min-height: 38px;
		border-bottom: 1px solid #f1f2f3;
		line-height: 18px;
	}
	.main-navigation ul li:first-child, .main-navigation ul li:last-child {
		margin-left: 0;
		margin-right: 0;
	}
	.main-navigation ul li a {
		padding: 0;
	}
	.main-navigation ul li a:hover, .main-navigation ul li a:focus, .main-navigation ul li a:active {
		color: orange;
	}
	.main-navigation ul li > ul {
		margin-top: 8px;
	}
	.main-navigation ul li.menu-item-has-children > ul > li:last-child {
		padding-bottom: 1px;
		margin-bottom: -1px;
	}
	.main-navigation ul .menu-item-has-children.toggle-on {
		padding-bottom: 1px;
	}
	.main-navigation ul .menu-item-has-children.toggle-on > .toggle-on {
		margin-top: 10px;
	}
	.main-navigation ul .menu-item-has-children > a {
		padding-right: 50px;
	}
	.main-navigation ul ul {
		display: none;
		position: inherit;
		top: auto;
		left: auto;
		float: none;
		padding: 0;
		margin: 0 0 0 40px;
		background: transparent;
		border: none;
		border-top: 1px solid #f1f2f3;
	}
	.main-navigation ul ul:before {
		content: '';
		display: block;
		position: absolute;
		top: -1px;
		left: -40px;
		width: 100%;
		height: 1px;
		background: #f1f2f3;
	}
	.main-navigation ul ul.toggle-on {
		display: block;
	}
	.main-navigation ul ul a {
		padding: 0;
		width: 100%;
		color: white;
	}
	.main-navigation ul ul a:hover, .main-navigation ul ul a:focus, .main-navigation ul ul a:active {
		color: #e06d5e;
	}
	.main-navigation ul ul li {
		padding: 10px 0;
		border-bottom: 1px solid #f1f2f3;
	}
	.main-navigation ul ul li:first-child {
		padding-top: 10px;
	}
	.main-navigation ul ul li:last-child {
		padding-bottom: 10px;
	}
	.main-navigation ul ul li > ul {
		margin-top: 8px;
	}
	.main-navigation ul ul ul {
		top: auto;
		left: auto;
		margin: 0 0 0 40px;
		border: none;
		border-top: 1px solid #f1f2f3;
	}
}
@media screen and (max-width: 959px) and (max-width: 767px) {
	.main-navigation:before, .main-navigation:after {
		padding-left: 20px;
		padding-right: 20px;
		margin-left: -20px;
	}
}
@media screen and (max-width: 767px) {
	.main-navigation.toggled .menu-wrapper:before {
		left: -20px;
		padding: 0 20px;
	}
	.main-navigation ul ul {
		margin-left: 20px;
	}
	.main-navigation ul ul:before {
		left: -20px;
	}
	.main-navigation ul ul ul {
		margin-left: 20px;
	}
}

    PS: notice that it has different sizes for the screen, it adjust if you make the screen smaller (for example mobile) so i dont know if that should be taken into account when coming up with a solution, because i dont want to mess with the way it looks on mobile too much

    Thread Starter maxvkva

    (@maxvkva)

    Code could also be seen here:

    https://gist.github.com/anonymous/925ee8c763584114a8497e90c34b84cf

    Hi @maxvkva!

    You can change the colour of a link on hover via the :hover selector, which you can learn more about here:

    https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

    So, for example, you could append :hover to #menu-item-43 a in order to style the way your first menu item looks when hovered over: 

    #menu-item-43 a:hover {
    color: #e06d5e;
}

    Replace #menu-item-43 with the ID of any menu item you’re trying to target. #e06d5e can also be replaced with any colour code you wish to use.

    Similarly, the current menu item can be targeted with the :active selector:

    https://developer.mozilla.org/en-US/docs/Web/CSS/:active

    For example:

    #menu-item-43 a:active {
    color: #e06d5e;
}

    The above snippets will work across all devices and won’t impact the the different font sizes you’ve set for mobiles.

    Let me know how that goes. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Different colors to menu items’ is closed to new replies.