theme color

    • 474 posts
    August 6, 2021 12:12 PM EDT

    Hei folks.

     

    Im working on a theme color.

    My aim is make the: Main Menu Background color, Header color 'white' .

     

    However, when i do, and convert to mobile view on a small screen, the menu tab (the 3 lines) is also white. This is not good as no one can see it.

    I have seen the same look on another theme but the menu tab (the 3 lines) is a different colour and can be seen.

     

    Question: How can i create the same effect ?

     

    Thanks

    mikel.

    • 21 posts
    August 6, 2021 3:58 PM EDT

    Hi Mikel,

    I'm not sure which theme you use for your site, but look for the following in your CSS file where the responsive instructions are declared.

    Something like:  

     @screen media and (max-width: 767px) {
    
    .global_left_panel
    .layout_page_header
    .layout_main
    .header-panel-toggle {
        color: #fff;  -- Change to the color you prefer.
    
    }

    This post was edited by socialenginestaff at August 7, 2021 5:54 AM EDT
    • Moderator
    • 6923 posts
    August 7, 2021 5:54 AM EDT

    Hi George! Thanks for posting that tip. Please remember to follow our posting guidelines and put any code in the code tag which is to the right of the smiley icon. I fixed it this time instead of deleting it.

    • 474 posts
    August 7, 2021 7:20 AM EDT

    Hei Goerge

    Thanks for the info.

    Im using the V5.6.1 Serenity theme.

     

    However im not seeing the info as you mentioned in my responsive css area. i will keep looking.

     

    Maybe its different in your theme.

     

    Thanks for your help.

    mikel.

    • Moderator
    • 6923 posts
    August 10, 2021 7:03 AM EDT

    You can add it to the bottom of your cloned theme in the theme.css in admin. Then clear cache. It should work. Change from the white to a color you prefer.

    • 474 posts
    August 10, 2021 12:30 PM EDT

    Hei Donna

    Oh ok. il try that.

    I was looking for the code in my Theme.css.

     

    no wonder i could find it. 

    think i need better eyeballs.

    Thanks

    mikel.

    • 474 posts
    August 11, 2021 12:45 PM EDT

    Hei George and Donna

     

    I placed the code into my theme.css.

    but it did not work out as i thought it would. not what i had in mind. 

     

    Il have another go or there may need to be a change in the code somewhere maybe.

     

    Thanks for you help.

     

    mikel.

    • Moderator
    • 6923 posts
    August 11, 2021 1:26 PM EDT

    Did the menus get messed up from it? It shouldn't have messed them up. Remove the comment about change color to what you want, in the code if you hadn't. Be sure to enable development mode and disable development mode after making changes.

    • 21 posts
    August 11, 2021 2:10 PM EDT

    Mikel, 

    Looks to me like you need a closing } bracket on your new CSS instruction. We've all done it.

    George

     

    • 474 posts
    August 12, 2021 4:46 AM EDT

     Hei George and Donna

    I added the Code as shown. still get the same result.

    Is it possible that there is something different between your site theme and my site theme that is causing this effect ?

     

    mikel.

    • Moderator
    • 6923 posts
    August 12, 2021 4:59 AM EDT

    You aren't adding the closing and so it is missing it. Instead of adding it at the bottom, add it to each of your media width responsive code. If you search the code, you will see a responsive section in the theme.css.  This is easier if you copy and paste it into your favorite code editor but you can do it how you want. I will add a screenshot that shows how far down this one section is. If you add your code to that section, it will have the proper closing tag so add this:

    .global_left_panel
    .layout_page_header
    .layout_main
    .header-panel-toggle {
        color: #000;
    
    }

     

    to the media areas noting that you would want to do it for each media size once you test each one.