Menu colors

Hello,

I'm trying to change the background and text color for all platforms (computer, tablet, and mobile). I've read other feeds, but I haven't found a code that fixes all my problems. 

1. On a computer, the BACKGROUND of the chosen page shows in maroon (on my website) with white text while the others are in white background with black text.

What I want: Chosen page with maroon background and white text while the other pages with white background and maroon text

2. On tablet AND mobile, the background shows in dark grey. Hovered and chosen page shows in maroon text. Other text shows in white

What I want: Black background. White text on all links. Maroon background on hovered and chosen link. 

Hopefully that is clear. Let me know if you need more clarification

Comments

  • Also my website is www.highfivesportswear.net
  • Hi don76dominy

    Please add this give css code in your customise >> additional css box

    .navbar-default .navbar-nav > li > a {
        color: #5b0624;
    }
    @media (max-width: 990px) and (min-width: 100px){
    .navbar-nav {
    background-color: #0f0f16;
    }
    }
    @media (max-width: 990px) and (min-width: 100px){
    .navbar .navbar-nav > li > a:hover {
    color: #5b0624;
    }
    }

    Let me know did it work for you.

    Thanks
    A
  • Thank you for the quick response. However, it didn't completely fix my issue. The 1st code helped and the 2nd code helped partially. The 3rd code didn't seem to do anything. 

    1. I need the background to change colors when I hover over AND click on all platforms. 
    2. I need the text to change colors when I hover over and click on all platforms. 
    3. I would like the code to change the regular background color on all platforms including submenus on computer/laptop platform. The 2nd code you provided only changed the background to everything except computer/laptop. I need that color to change too. 
    4. I would like the code to change the text color on all platforms. 

  • Hi

    Sure we will help you to sort out all your queries one by one. So first we will discuses about  your first query.

    Remove the previous give code and add the bellow give code.

    .navbar-default .navbar-nav > li > a {
        color: #5b0624;
    }

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
        background-color: #2218bf;
    }


    Let me know did it work for your first query.

    Thanks
    A

      
  • OK, let's start all over. 

    1st, I need the drop menu text color to be maroon on desktop, tablet, and mobile. 
  • Hi don76dominy

    Ok use the given css code in your theme custom css box

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {color: #5b0624;}
    .dropdown-menu > li > a {color: #5b0624;}

    Let me know did it work for your dorpdown menu text color.

    Thanks
    A
  • This changes the color in the computer/laptop, but it doesn't change it under the tablet or mobile setting. Is there another code?
  • Hi 

    Ok here the css for your mobile and tablet device menu color and background color.

    @media (max-width: 990px) and (min-width: 100px)
    .navbar .navbar-nav > li > a {
        border-bottom: 1px dotted #2214a7;
        background-color: #a24d4d;
    color: #ce1717;
    }


    @media (max-width: 990px) and (min-width: 100px)
    .navbar.navbar-default .navbar-nav > .active > a, .navbar.navbar-default .navbar-nav > .active > a:hover, .navbar.navbar-default .navbar-nav > .active > a:focus {
        color: #5b0624;
        background-color: #a24d4d;
    }

    Let me know did it work.

    Thanks
    A
  • That seems not to work. 
  • Hi 

    Please remove above css code and add the new one 

    @media (max-width: 990px) and (min-width: 100px) {
    .navbar .navbar-nav > li > a {
    border-bottom: 1px dotted #2214a7;
    background-color: #a24d4d;
    color: #ce1717;
    }
    }

    @media (max-width: 990px) and (min-width: 100px){
    .navbar-custom .dropdown-menu > li > a:hover, .navbar.navbar-default .navbar-nav > .active > a, .navbar.navbar-default .navbar-nav > .active > a:hover, .navbar.navbar-default .navbar-nav > .active > a:focus {
    color: #5b0624;
    background-color: #a24d4d;
    }
    }

    Change color code as your need.

    Thanks
    A
Sign In or Register to comment.