Top Menu Color Code

joseisoto

Hello
How can I make the main menu color coded the same way you have it on the demo?

TIA

pavit

Each menu item has an extra class , you can add class editing your menu from template manager -> Megamenu -> and add extra class for menu items

other classes are :

link-yellow
link-green
link-purple
link-blue

is-home for home menu item

Hope it helps

joseisoto

thank you

joseisoto

How do i change menu outer effect color?

pavit

Hi joseisoto

Try to add to your custom.css file

.link-red.active > a, .link-red.active > span {
background:#yourlogoredcolor!important;
}

joseisoto

where should i put this file?

joseisoto

sorry got it
Thank you

joseisoto

how about to change the link-red to my logo red color?

pavit

joseisoto how about to change the link-red to my logo red color?

You can override settings for link-red adding new values to custom.css file
These are template.css settings that should be overrided

.link-red > a,
.link-red > span {
  color: #ff1155 !important;
}
.link-red > a:hover,
.link-red > span:hover,
.link-red > a:focus,
.link-red > span:focus,
.link-red > a:active,
.link-red > span:active {
  color: #dd003f !important;
}
.link-red > a .caret,
.link-red > span .caret {
  border-top-color: #ff1155 !important;
  border-bottom-color: #ff1155 !important;
}
.link-red.active > a,
.link-red.active > span {
  color: #ffffff !important;
  background: #ff1155 !important;
}
.link-red.active > a .caret,
.link-red.active > span .caret {
  border-top-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}
.link-red .ja-masthead {
  background-color: #ff1155;
}

Regards

joseisoto

This is what i did on the custom.css but it didn't work

.link-red.active > a, .link-red.active > span {
background:#ff0400 !important;
}
.link-red > a,
.link-red > span {
color: #ff0400 !important;
}
.link-red > a:hover,
.link-red > span:hover,
.link-red > a:focus,
.link-red > span:focus,
.link-red > a:active,
.link-red > span:active {
color: #ff0400 !important;
}
.link-red > a .caret,
.link-red > span .caret {
border-top-color: #ff0400 !important;
border-bottom-color: #ff0400 !important;
}
.link-red.active > a,
.link-red.active > span {
color: #ffffff !important;
background: #ff0400 !important;
}
.link-red.active > a .caret,
.link-red.active > span .caret {
border-top-color: #ffffff !important;
border-bottom-color: #ffffff !important;
}
.link-red .ja-masthead {
background-color: #ff0400;
}if("undefined"!==typeof hljs)hljs.ha();else if("undefined"===typeof hljsLoading){hljsLoading=1;var a=document.getElementsByTagName("head&quot😉[0],e=document.createElement("link&quot😉;e.type="text/css";e.rel="stylesheet";e.href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css";a.appendChild(e);e=document.createElement("script&quot😉;e.type="text/javascript";e.onload=function(){var d={},f=0;hljs.hb=function(b){b.removeAttribute("data-hljs&quot😉;var c=b.innerHTML;c in d?b.innerHTML=d[c]🙁7

aman204

joseisoto As apparently seen, The menu:active selector color appears to be fine now. Kindly view screenshot

Kindly ensure to clear your browser cache if changes dont reflect

joseisoto

excellent thanks