Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1213677

    Hello, I’ve found a few topics on this issue but none of them seem to work in my case. My mobile header seems to be inheriting the color from my desktop selection and I can’t change it. I believe there may be a conflict somewhere. I’ve tried this code in my quick css panel but it didn’t work. Any help would be greatly appreciated.
    @media only screen and (max-width: 767px) {
    #header_main {
    background:red;
    border-bottom:none;
    }
    }

    #1213712

    Hey Solan,

    Add this to quick css:

    @media only screen and (max-width: 767px){
    #top #wrap_all .av_header_transparency {
    background:red!important;
    }}
    
    
    Best regards,
    Jordan Shannon
    #1213730

    Hi Jordan, thanks fro your reply. Unfortunately it didn’t work. If there was a conflict regarding the mobile header color where of what could it be? FYI: here’s the code from my Quick CSS:

    @media only screen and (max-width: 720px) {
    .responsive #top #wrap_all #header_main .main_menu .social_bookmarks {
    display: block !important;
    }}
    @media only screen and (max-width: 767px){
    #top #wrap_all .av_header_transparency {
    background:red!important;
    }}

    #menu-item-search {
    display: none;
    }

    .big-preview img {
    max-width: 60% !important;
    height: auto !important;
    }
    .big-preview img {
    display: block;
    margin-left: auto;

    margin-right: auto;
    }

    #top .social_bookmarks li a {
    color: #808080 !important;
    }
    .avia-mailchimp-form input[type=’submit’] {
    background-color: #11202a !important;
    }

    #1213740

    Hi,

    Add my code to the very top of quick css and clear the cache a few times over. Also, please screenshot the exact area you need fix so I know we’re talking about the same thing.

    Best regards,
    Jordan Shannon

    #1213862

    Jordan, it appears to have worked. I moved the code to the top of the quick css window and as of this morning it worked.

    Here’s the weird part and I hope you can help explain why it takes a while for the changes to happen. I looked at the site on my iPhone this morning and I see the header is red, so your css code worked. Then, I changed the color to #FFFFFF and the header changes to white on all pages EXCEPT the home page no matter how many times I clear the cache. I think it might be missing a step somewhere.. I’m testing the site using Safari and Chrome on my iPhone but even after I clear the cache in each browser or use an Incognito window on Chrome, I don”t immediately see the changes. Am I missing something here? I know this isn’t exactly an Enfold issue but if you could help me out I’d appreciate it.

    SOLVED: I’m posting this in case someone else has the same issue. I circled back to the WP option: Appearance/Menus and unchecked the Enfold Child secondary Menu option and the Home page menu immediately changed to white matching the other pages.

    • This reply was modified 4 years, 7 months ago by Solan.
    #1214107

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change Color of Mobile Header Background’ is closed to new replies.