mobile navigation background menu color / Desktop Font Color

  • Unknown's avatar
    sagibinder · Member ·

    Hi there, I would like to get your help please in 2 issues:
    1. mobile navigation background menu color – if you see my site: https://rotemshaul.com/ on mobile devices, you’ll see the navigation menu color has been changed but not quite successfully. the background color is black and and font is black as well.
    I want to change that background color to “transparent” (same in the desktop version)

    2. Navigation menu font size and type – As you can see my site has 2 languages (Hebrew,English) I tired to changed to font and size in CSS customization without success so I found another solution in the net.
    Editing the Manu text through the WP Dashboard with HTML code, for example

    English Manu:
    <font color=”#000000″; style = “font-family:Abhaya libre;font-size:14px;”>Collections

    Hebrew Manu:
    <font color=”#000000″;font-size:16px;”>קולקציות

    The problem is that some browers prenst it right and some not even in my pc/
    Can you please help me to change it correctly for both languages through CSS customization

    By the way this is my CSS code that I already edited

    #page, .site-content-contain, #primary-search-wrapper .search-container, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-total, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded, .audioman-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-float, .audioman-mejs-container.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, .woocommerce-account .woocommerce-MyAccount-navigation

    a {
    background-color:#ffffff !important;
    }

    #header-links {
    background: transparent!important;
    }

    .storefront-primary-navigation { background-color: transparent;

    !important; }
    .storefront-primary-navigation,
    .main-navigation ul.menu ul.sub-menu{
    background-color:transparent;
    }
    #header .primary-navigation .toggle-mobile-menu{
    color: transparent;
    }

    .hm-nav-container {
    background-color: transparent;
    }
    p { color:#000000; }
    h1, h2, h3, h4, h5, h6 {

    color: #000000;

    }
    .entry-title a {

    color: #000000;

    }
    h1.entry-title {

    color: #000000;

    }
    .main h1.title a, .main h2.title a, .main h2.posttitle a, .hentry .title {
    color: #000000;
    }

    .main-navigation a {
    color: #000000;
    }
    footer{ background-color: black; }

    .tnp-widget {
    color: white; !important;
    }

  • Unknown's avatar
    cintiamillan · Member ·

    Hi there :)

    1. mobile navigation background menu color

    Try this:

    .menu-inside-wrapper {
    background: lightgray;
    }

    If you change the background color to transparent in the mobile version, then it’s difficult to read, but you can try anyways (just change lightgray to transparent):

    .menu-inside-wrapper {
    background: transparent;
    }

    lightgray is just a random color. You can choose any other color you like.

    2. Navigation menu font size and type

    Editing the Menu text through the WP Dashboard with HTML code or editing it on the Custom CSS is exactly the same thing. (but it’s good practice to do it on the custom CSS so you can keep things clear and your code easier to read)

    When you write in HTML:

    style = “font-family:Abhaya libre;font-size:14px;”

    It’s the same as writing in CSS:

    .class {
    font-family: Abhaya libre;
    font-size: 14px;
    }

    Regarding your code, to have fewer lines of code and keep it clear, you can join all the classes that have the color: #000000;

    Replace this:

    p { color:#000000; }
    h1, h2, h3, h4, h5, h6 {

    color: #000000;

    }
    .entry-title a {

    color: #000000;

    }
    h1.entry-title {

    color: #000000;

    }
    .main h1.title a, .main h2.title a, .main h2.posttitle a, .hentry .title {
    color: #000000;
    }

    .main-navigation a {
    color: #000000;
    }

    For this:

    p, h1, h2, h3, h4, h5, h6, .entry-title a, h1.entry-title, .main h1.title a, .main h2.title a, .main h2.posttitle a, .hentry .title, .main-navigation a {
    color: #000000;
    }

  • Unknown's avatar
    sagibinder · Member ·

    Hi cintiamillan
    First thanks for the help and making the code clear – it’s working!
    I faced with 2 issues regarding colors,
    https://ibb.co/kXtqtHv
    1. As you can see in the hyperlink the “Burger Icon” of the menu is white I would like to change it to Black font color.
    2. When moving the mouse on the menu the background color is “black”
    since the font color is black, i can’t see anything, I would like to change it to a different color such as Grey/
    Can you please help me with the coding of it?
    Thanks Alot

  • Unknown's avatar
    cintiamillan · Member ·

    Hi again :)

    1. As you can see in the hyperlink the “Burger Icon” of the menu is white I would like to change it to Black font color.

    Try this:

    .absolute-header .site-title a, .absolute-header .menu-toggle {
    color: #000;
    }


    @media     screen and (min-width: 75em)
    .navigation-classic.absolute-header .main-navigation a {
    color: #000;
    }

  • Unknown's avatar
    cintiamillan · Member ·

    2. When moving the mouse on the menu the background color is “black”
    since the font color is black, i can’t see anything, I would like to change it to a different color such as Grey/

    I’m sorry, I can only see the expanded menu on my side so I’m not getting where do you access that menu. I don’t understand Hebrew, do you have the same issue in English?

    Maybe I can figure it out :)

  • The topic ‘mobile navigation background menu color / Desktop Font Color’ is closed to new replies.