Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1327659

    HI, I’ve seen several posts in this forum abou this issue. And I’ve tried your fixes, to no avail.

    When you have a Transparent Header on the Desktop Version of a site, the Mobile Version does not take on the Top Bar Styling that you have set in Enfold Theme Options > Advanced Styling. So I removed it and tried your css:
    @media only screen and (max-width: 767px) {
    #header_meta {
    background-color: #030B38!important;
    }
    }

    But it still does not work, not either way. Top Bar is white on mobile and you cannot see anything. (Note , if I am in theme customizer “Additional CSS” and add your css, it appears correctly in preview, but not on front end).

    Site is here: http://eleinar4.sg-host.com/

    This happens over and over again if you use a transparent header – top bar does not show up on mobile, no matter how you try to style it.

    #1327704

    Hi Eleina_Shinn,

    I can’t seem to find the code you added.
    Can you try to disable CSS file merging and compression in Enfold > Performance?
    If you have plugins that optimizes CSS files, please disable those settings and clear the cache.

    Best regards,
    Nikko

    #1327799

    Okay, I turned everything off, all caching on the server level, and I have disabled CSS file merging and compression in Enfold Theme Options, Performance settings.

    I also removed my custom css, which was this:
    /*TOP BAR COLOR ON MOBILE */
    @media only screen and (max-width: 767px) {
    #header_meta {
    background-color: #030B38!important; color #ffffff !important;
    }
    }

    I have gone into Advanced Styling > Small bar above Main Menu – and I have chosen a very dark background color with white text. I can now see the dark background, but the text does not appear in white, so it must be taking on the color from somewhere else. This is always a problem with Enfold when you use a transparent header, by the way – for some reason it messes with the top bar color when the transparent header is not in effect, like on the mobile version. So I wonder, is the mobile version suposed to take on the colors you’ve chosen in “Small bar above Main Menu” or is there a different way this is supposed to be done, but I just don’t know what it is?

    Thank you for your help. Seems like this should be such a simple thing and I hate bothering you about it but maybe we can figure it out once and for all!

    Update: just went back and looked, now the top bar on mobile is white and maybe white text. – nothing appears again. No custom css, just advanced styling as detailed above.

    • This reply was modified 3 years, 1 month ago by Eleina_Shinn.
    #1327875

    Hi,

    Thanks for the update. Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    #1327961
    This reply has been marked as private.
    #1327997

    Hi,

    Thanks for the update. The header meta problem; I can’t reproduce the problem on my end. I added the CSS in the WordPress customiser, and it’s working as it should. Please see screenshot in private.

    I can’t see the other problem you are describing on my end either. I edited the Special Heading, and it’s working as expected, please see screenshot in private. Could you try using a different browser to see if that helps?

    If you are not seeing changes on your actual site, then it’s likely due to local or server side caching. The theme doesn’t have any functionality for that, and there’s nothing in the theme which would delay publishing of any content.

    Best regards,
    Rikard

    #1328255

    okay, top bar seems to be working now, thank you.

    #1328295

    Hi,

    Great, I’m glad that we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.