WordPress.org

Forums

Techism
[resolved] Change menu color in mobile view (8 posts)

  1. DalalRahme
    Member
    Posted 1 year ago #

    The theme is nice because it is responsive. Unfortunately, when you go to mobile view, the menu is barely visible. How do I change the color of the text on the navigation menu to Blue instead of grey to make it more visible in mobile view.

  2. .
    Member
    Posted 1 year ago #

    You can use this:

    @media all and (max-width: 767px) {
        .main-navigation a {
            color: #009BFF;
        }
    }

    Change the color code as needed. You can find the code for the colors at http://colorpicker.com/

    The @media query line tell the browser to only apply that when the view is below 767px (which is when the mobile layout kicks in for your theme).

  3. DalalRahme
    Member
    Posted 1 year ago #

    Hi TEchievous,
    In the @media all and (max-width: 767px), there is nothing that points to color. SO I added your suggestion but nothing changed!!! I still get the grey invisible color #636363. I searched the whole css and found only 2 places having this #636363 and changed them and nothing changed too. Any other suggestions? Thanks

  4. Andrew
    Forum moderator
    Posted 1 year ago #

    If you're not using a Child Theme, and if the theme doesn't have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin

    Then use its "CSS Code" section of the dashboard to hold your CSS modifications.

    Alternatively use your Child Theme style.css file to hold your CSS modifications.

  5. .
    Member
    Posted 1 year ago #

    In the @media all and (max-width: 767px), there is nothing that points to color. SO I added your suggestion but nothing changed!!! I still get the grey invisible color #636363. I searched the whole css and found only 2 places having this #636363 and changed them and nothing changed too. Any other suggestions? Thanks

    My code does work when applied properly. See screenshot here: http://i.imgur.com/MFnUOxg.png (I changed the color to red so it'd be easier to notice).

    It's not working because you're trying to change the parent's style.css. You're not supposed to mess with the parent's style.css file. You're supposed to be using child CSS or custom CSS.

  6. DalalRahme
    Member
    Posted 1 year ago #

    how do i know if I'm using a child theme or not? I just go to appearance-editor-stylesheet. I'm new to this.

  7. DalalRahme
    Member
    Posted 1 year ago #

    Thank you very much Andrew and Techievous. I've installed the Custom CSS manager and added
    `@media all and (max-width: 767px) {
    .main-navigation a {
    color: #009BFF;
    }
    }
    It works!!

  8. mrcpu
    Member
    Posted 4 months ago #

    I couldn't find a custom css manager that works with 4.2.1 with the exception of a package named "Custom CSS" from HTML5andBeyond. However, adding the above code to the "Custom Whole Site CSS" box showed up in view-source, but didn't seem to override the theme css.

    Opening the theme's style.css and commenting out the second #636363 resolved it.

    FWTW.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic