WordPress.org

Forums

[resolved] CSS in Tetris theme - changing colour of menu in mobile mode! (14 posts)

  1. BarefootCoach
    Member
    Posted 11 months ago #

    Hi all,

    Having some problems with the colour of the menu in my new website! Originally the colour of menu items was bright orange - which would totally clash with my desired scheme. So I went all the way down the style sheet changing the orange (#e73420) to my desired shade of green.

    However, when viewed on my mobile device, the menu is still bright orange! And any sub items in the menu also remain orange, even in full screen mode. Any help with locating and changing this would be apprecited :-)

    Website is here: http://www.GrassrootsHypnotherapy.com

    CSS is here: http://bit.ly/1ntbw3S

    Many thanks, in advance!

  2. Marklcm
    Member
    Posted 11 months ago #

    this the css defining the color.

    @media only screen and (max-width: 959px) {
    
    #navigation {
        background: url("../images/responsive-nav.png") no-repeat scroll right center #e73420;
        height: 70px;
        left: auto;
        margin-top: 0;
        position: inherit;
        right: auto;
        top: auto;
        width: 100%;
    }
    }

    note the @media part.This says 'if the screen is up to 959px wide use this color'
    you should effect any changes like this in a child theme to save losing all your changes if the theme is updated.
    Use firebug or similar to identify where to make changes

  3. BarefootCoach
    Member
    Posted 11 months ago #

    Thanks Marklcm - appreciated.

    I am using a child theme as my activated theme - though the CSS for that just points back to style.css of my main theme. Is this incorrect? Perhaps I should copy the entire CSS over to the child theme itself?

  4. Marklcm
    Member
    Posted 11 months ago #

    as long you are using

    @import url("../yourtheme/style.css"); to point to main theme style sheet you will be fine. I havn't seen any recommendations to copy the entire CSS over to the child theme itself.

    just put the @media rule at the bottom of your child theme stylesheet

    @media only screen and (max-width: 959px) {
    #navigation {
        background: url("../images/responsive-nav.png") no-repeat scroll right center #e73420;
    }
    }

    changing the value for the color to your new value. Be sure to include all { } shown

  5. BarefootCoach
    Member
    Posted 11 months ago #

    Thanks - this is all very useful. I've made the changes you mention, and all looks great... except - the sub menu items on full screen website are still bright orange when clicked on :-/

    Example: hover over 'About' tab and select 'Company Values'. Although, I can't find any other instances of the #e73420 colour within the style sheet.

    Any further ideas on this, please?!

  6. Marklcm
    Member
    Posted 11 months ago #

    the element you want to change is

    #navigation .sf-menu ul li > a:hover {
        background-color: #bf2615;

    I am just using firebug to identify the elements. I haven't checked through the style sheet as this can be laborious. Also the theme may be calling several style sheets, they sometimes do. Changing this value in your child theme will fix it.

    Also I think the hover value will just be a different shade red to the one you have been looking for. The browser plugin ColorZilla is a handy tool to use to check these sort of things. Just Google it.

  7. BarefootCoach
    Member
    Posted 11 months ago #

    Hey, Sorry for the delay in getting back - and thank you for this! Have downloaded ColourZilla and seen how easy it is!

    When you say to change the value in my child theme, is it literally a case of posting the above code (with correct colour value) into the child theme CSS? Again, at the moment all that's present in a signpost back to the main theme CSS ...

    Sorry if this is basic stuff - still getting the hang of things!

  8. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Yes it does point back to the parent stylesheet in the sense that the styles are @imported over, but you can put your own modifications below this line:

    @import url('../wpex-tetris/style.css');
  9. BarefootCoach
    Member
    Posted 11 months ago #

    Ah I see! So does that also mean that all my other CSS modifications must be posted directly onto the child theme stylesheet? I did wonder what would happen to mod's, once I updated the main theme...

  10. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Your CSS modifications should be in this Child Theme style.css file. When a theme updates it literally replaces all of the files with new ones, even if no changes are made. So the style.css file of the parent theme will be overwritten.

  11. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Well - I'm talking about themes distributed on WordPress.org. You need to talk to your theme's vendors/ authors about this theme really.

  12. BarefootCoach
    Member
    Posted 10 months ago #

    Great! Thanks so much Andrew and Marclcm... all sorted :-)

  13. Marklcm
    Member
    Posted 10 months ago #

    good to hear, you are welcome
    I think it would be a good idea to mark topic as resolved

  14. BarefootCoach
    Member
    Posted 10 months ago #

    All resolved :-)

Reply

You must log in to post.

About this Topic