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

    Hello. How can I darken a transparent header? Example: http://www.ferdykorpershoek.com/

    #698104

    Hi brianbu!

    Please take a look here
    https://kriesi.at/support/topic/header-background-color-and-logo/

    and let us know if that works out for you.

    Best regards,
    Basilis

    #698123

    Thanks Basilis for the quick response but that’s not what I’m looking for. That fix changed the header to solid white. I’m trying to keep the transparency but just make it slightly darker (less transparent). Please see the example site I posted above.

    Is there a setting to simply adjust the level of transparency on the header or will I have to manually enter code?

    • This reply was modified 8 years, 2 months ago by brianbu.
    #698157

    Hi,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    #698533

    So I added the following code:
    #top .av_header_glassy.av_header_transparency #header_main {
    background-color: rgba(255,255,255,0.2);
    }
    kriesi.at/support/topic/adding-a-dark-transparent-background-to-the-menu/

    It did what I wanted when viewing on desktop and darkened the transparency of the header to my desired amount. The problem now is that on mobile I get a slightly darkened header…instead of being white it is now gray.

    To make the gray mobile slider white again I tried this:
    @media only screen and (max-width: 767px) {
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
    background-color: red !important;
    }
    }
    kriesi.at/support/topic/change-colour-of-mobile-header/

    I of course changed ‘red’ to ‘white’ but got the same effect…a gray header. The transparency setting is overriding any other changes.

    Is there a way to use a code similar to the this one but have it only active on non-mobile viewing?
    #top .av_header_glassy.av_header_transparency #header_main {
    background-color: rgba(255,255,255,0.2);
    }

    Again, I want to be able to do what this site is doing: http://www.ferdykorpershoek.com/
    If you look at it on desktop you’ll notice a dark transparent header, and if you look on mobile you’ll notice it’s white.

    • This reply was modified 8 years, 2 months ago by brianbu.
    #698605

    Hi,

    Glad you figured the desktop version and thank you for sharing the example site. Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    #698845

    Appreciate the help but I found an answer online at youtube.com/watch?v=uZv5uLUfyas

    #top .av_header_transparency {
    background: rgba(0, 0, 0, 0.6);
    }

    That code does the trick…allows me to darken the transparent header (or change the color if I want) but doesn’t affect the mobile header color.

    #699489

    Hi,

    Great, glad you found a solution and thanks for sharing :-)

    Please let us know if you should need any further help on the topic.

    Regards,
    Rikard

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