[Resolved] Menu text colour

This topic contains 13 replies, has 2 voices, and was last updated by  Andrew Misplon 1 year, 2 months ago.

Tagged: 

  • Author
    Posts
  • #5357

    deirdre
    Participant

    Hey
    I’d love to know how to change the menu text colour. Currently it’s blue. I may have selected this colour when trying out a previous theme and it may have been transferred across when I move to Ultra theme.
    Thanks for your help

    #5407

    Andrew Misplon
    Keymaster

    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.

    #5414

    deirdre
    Participant

    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

    #5415

    Andrew Misplon
    Keymaster

    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.

    #5426

    deirdre
    Participant

    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

    #5430

    Andrew Misplon
    Keymaster

    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;
    }
    #5431

    deirdre
    Participant

    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

    • This reply was modified 1 year, 2 months ago by  deirdre.
    #5433

    Andrew Misplon
    Keymaster

    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.

    #5449

    deirdre
    Participant
    This reply has been marked as private.
    #5450

    Andrew Misplon
    Keymaster

    Thanks. Try adding the following to Custom CSS:

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

    deirdre
    Participant

    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

    #5455

    Andrew Misplon
    Keymaster

    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;
    }
    #5456

    deirdre
    Participant

    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

    #5457

    Andrew Misplon
    Keymaster

    Super, glad to hear you’ve made progress 🙂

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

Scroll to top