[hipandhealthykids]

Hello,

I am working with Simple Catch theme and have figured out how to center the menu buttons (using this css code that I read from another support thread…Thank you!
#header #mainmenu {
float: none;
text-align: center;
}
#header #mainmenu ul li {
display: inline-block;
float: none;
}).

Where I’m at now is that I would like to stretch the menu buttons so they are all the same size and justified within the overall bar. Additionally I would like to put CSS code in the Custom CSS box to allow me to change the colors (background/font) of the menu, sub menus, etc.

I saw a few other strings with recoloring information, but all the code I tried didn’t do anything (perhaps b.c I already am using this code above?)

Thanks in advance for your help. My test site is http://www.hipandhealthykid.com

[Sakin]

@hipandhealthykids: Our free version doesn’t have color options in Theme Options panel but if you upgrade to pro version then you will get that feature.

For menu stretch, you can increase the menu items padding and add the following CSS in “Appearance => Theme Options => Custom CSS” box.
#header #mainmenu ul li a { padding: 0 15px; }

/* Menu Background Color */
#header #mainmenu { background-color: #fff; }
/* Menu Text Color */
#header #mainmenu ul li a { color: #444; }
/* Sub-Menu Background Color */
#header #mainmenu ul li ul { background-color: #444; }
/* Sub-Menu Text Color */
#header #mainmenu ul li ul li a { color: #999; }

[hipandhealthykids]

Perfect! Is there also a way to change the hover color (background & text) as well as the color (background & text) of the active page when highlighted?

[Sakin]

@hipandhealthykids: Here goes the css for hover.
#header #mainmenu ul li:hover > a { background-color: #444; color: #fff; }

[hipandhealthykids]

Great! How about hover sub menu and the active page highlight?

[Sakin]

@hipandhealthykids: Here goes the css.

/* For Active Menu */
#header #mainmenu ul li.current-menu-item a, 
#header #mainmenu ul li.current-menu-parent a, 
#header #mainmenu ul li.current_page_item a, 
#header #mainmenu ul li.current_page_ancestor a {
    background-color: #444;
    color: #fff;
}
/* Sub-menu Hover Color */
#header #mainmenu ul li ul li a:hover, 
#header #mainmenu ul li ul li:hover > a {
	background-color:#333;
	color:#fff;
}

For more customization please use hire a customizer http://catchthemes.com/hire-customizer/

[hipandhealthykids]

Thank you. Apologies…didn’t mean to bombard with questions…just getting all my questions out of the way at one time after exhausting the boards.

p.s. if you can add an email icon to the social media buttons on the next release that would be wonderful. Thank you!

[Sakin]

@hipandhealthykids: Ok thanks will add in next version update.

[Author]

Posts