Menu text colour

Hi Deirdre

So sorry for missing your question. Please, feel free to bump a support topic if you don’t receive a reply in 48hrs.

Do you still need help with this question? You can set the menu colors in Ultra Premium from Appearance > Customize > Theme Design > Main Menu.

Main Menu

If you’d like to stay with the free version, I can try to assist with a Custom CSS snippet.

Hey Andrew

Thanks for getting back to me. Yes I’m still looking for help with this. I would prefer to stay with the free version.
When I hover over the menu item it currently shows in blue, or when i’m on a certain tab page that tab in the menu is highlighted in blue. I’d love to change this to fit with my overall color scheme. Css advise would be great.

Thanks

Sure, you’ll need a plugin like Simple Custom CSS. Go to Appearance > Custom CSS and insert:

/* Main Menu */
.main-navigation ul li:hover > a, .main-navigation .menu-search .search-icon:hover:before {
	color: #0896fe;
}
.main-navigation div > ul > li > a:hover, .main-navigation div > ul > li.current > a:hover, .main-navigation ul ul, .main-navigation .menu-search .searchform input[name=s] {
	border-color: #0896fe;
}

Adjust as required.

Hey Andrew

Thanks so much for your help. It looks way better already. The menu item which I hover over is now the color I want.

There are still a few places where the blue color seems to show

1. If i’m on the about page, the about tab in the top menu shows as blue

2. Any links I have to another page on the site show as blue

3. Any recent posts also show in blue.

Any help with that would be much appreciated.

Many thanks

Glad to hear you’re making progress 🙂

It might get a bit cumbersome at this point as there are quite a few premium settings (some of which do hex color to RGB conversions) that control the parts you’ve mentioned like selected link color and content link color. I’ll do my best to assist a bit further.

/* Main Menu Current Link */
.main-navigation .current-menu-item > a, .main-navigation .current a {
	color: #0896fe;
}

/* Content Link Color */
a,a:visited,a:hover,a:focus,a:active,.comment-navigation .nav-links a:hover,.paging-navigation .nav-links a:hover,.post-navigation .nav-links a:hover,.panel-grid-cell .sow-features-list .sow-features-feature p.sow-more-text a:hover,.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a:hover,.panel-grid-cell .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a span.overlay,.entry-header h1.entry-title a:hover,.entry-header h1.page-title a:hover,.page-header h1.entry-title a:hover,.page-header h1.page-title a:hover,.site-content .entry-meta a:hover,.author-box span a:hover,.entry-footer a:hover,.comments-area .comment-author .fn a:hover,.comments-area .comment-metadata a:hover,.comments-area .reply a.comment-reply-link:hover,.comments-area .reply a.comment-reply-login:hover,.mbt-breadcrumbs a:hover,.mbt-featured-book-widget .mbt-book-title a:hover {
    color: #0896fe;
}

button,input[type="button"],input[type="reset"],input[type="submit"],.pagination .page-numbers:hover,.pagination .current,.entry-content .more-wrapper .more-link:hover,.entry-content .page-links span,.entry-content .page-links a span:hover {
    background: #0896fe;
}

button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {
    background: rgba(8,150,254,0.8);
}

blockquote {
    border-left: 3px solid #0896fe;
}

.entry-content p a,.entry-content li a,.entry-content dl a,.entry-content pre a,.entry-content code a,.entry-content blockquote a,.content-none .site-main a {
    border-bottom: 1px dotted #0896fe;
    color: #0896fe;
}

.entry-content p a:hover,.entry-content li a:hover,.entry-content dl a:hover,.entry-content pre a:hover,.entry-content code a:hover,.entry-content blockquote a:hover,.content-none .site-main a:hover,.comments-area .comment-list .pingback a,.comments-area .comment-list .pingback a:hover,.comments-area .comment-list .pingback .edit-link a:hover,.comments-area .comment-content a,.comments-area .comment-content a:hover {
    border-bottom: 1px solid #0896fe;
}

Amazing

So much code, I didn’t realise it was so complex to do what I required.

It all looks great but one small thing. When I hover over a sub-menu item it still highlights in blue. If I click into a sub-menu page the main tab on that menu changes back to blue. Promise that’s my last question.

Thanks for all your help

I’d need to take a look at your site at this stage to try and pinpoint either which CSS rule is missing or to see if there are problems somewhere in the CSS. You can use the Set as private reply checkbox below to keep your site private.

This reply has been marked as private.

Thanks. Try adding the following to Custom CSS:

.main-navigation ul ul li:hover > a {
    background: #fec808;
}

Hey

Thanks that line of code solved one part, the hovering over the sub menu item. The second issue is still there “If I click into a sub-menu page the main tab on that menu changes back to blue. ”

Any ideas

Thanks as always for your help

Thanks for your feedback. Also, add:

.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a {
    color: #fec808;
}

Andrew you’re a legend

Thank you so much for all your help. My site is looking 10 times better after all your assistance. Very much appreciated.

Thanks

Super, glad to hear you’ve made progress 🙂