Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 12, 2022 at 10:04 pm #1348159
    stella-experience

    How can I change my header to be transparent in mobile view / for all smaller screen resolutions?
    It switches to white on lower screen so my white burger menu according to the CSS below, is no longer visible.
    Usually it should keep the transparency.

    .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #ffffff;
    }

    Target view

    Current view on mobile

    Thank you
    Sebastian

    April 13, 2022 at 6:20 am #1348188
    Ismael

    Hey stella-experience,

    Thank you for the inquiry.

    That is the default style of the header on tablet and phone view. We can use this css code in the Quick CSS field to revert back to the transparent header, but it might cause layout issues on mobile view.

    @media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: inherit;
    min-height: 0;
}
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    April 13, 2022 at 10:10 am #1348199
    stella-experience

    Hi Ismael,

    thank you.
    Unfortunately the header still appears in white after I did disable file compression setting accordingly.

    Questions:
    – There are two } at the end of your CSS code, correct?
    – If I put in only one } something is happening, but the header background is still white in mobile view. Then the burger menu seems in grey instead of white now according to my following CSS.

    – If there are perspective layout issues occuring is there alternatively a way to switch the burger menu color from #ffffff to #b50054 once the white background appears so at least it is still visible?

    This is the full custom css code I have applied:

    @media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
    width: 100%;
    float: none;
    height: auto;
    margin: 0 !important;
    opacity: inherit;
    min-height: 0;
}
}

.button {
color: #b50054 !important;
}

div .logo { left: 45%; }

.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after { 
background-color: #ffffff;
}

#socket .sub_menu_socket li {
     border-left-width: 0px !important;
}

.socket_color a, .socket_color .widget_first, .socket_color strong, .socket_color b, .socket_color b a, .socket_color strong a, .socket_color #js_sort_items a:hover, .socket_color #js_sort_items a.active_sort, .socket_color .av-sort-by-term a.active_sort, .socket_color .special_amp, .socket_color .taglist a.activeFilter, .socket_color #commentform .required, #top .socket_color .av-no-color.av-icon-style-border a.av-icon-char, .html_elegant-blog #top .socket_color .blog-categories a, .html_elegant-blog #top .socket_color .blog-categories a:hover {
color: #ffffff !important;
}

.socket_color a:hover, .socket_color h1 a:hover, .socket_color h2 a:hover, .socket_color h3 a:hover, .socket_color h4 a:hover, .socket_color h5 a:hover, .socket_color h6 a:hover, .socket_color .template-search a.news-content:hover, .socket_color .wp-playlist-item .wp-playlist-caption:hover {
color: #B50054 !important;
}

    Many thanks,
    Sebastian

    April 13, 2022 at 12:47 pm #1348227
    Ismael

    Hi,

    Thank you for the update.

    If you want to adjust the color of the burger menu icon instead, try to use this css code.

    @media only screen and (max-width: 989px) {
    .html_mobile_menu_tablet .header_color div .av-hamburger-inner, .html_mobile_menu_tablet .header_color div .av-hamburger-inner::before, .html_mobile_menu_tablet .header_color div .av-hamburger-inner::after {
        background-color: #000000;
    }
}

    And FYI, it is common practice to place css media queries at the very bottom of the stylesheet or in this case at the very bottom of the Quick CSS field.

    Best regards,
    Ismael

    April 13, 2022 at 5:03 pm #1348274
    stella-experience

    Hi Ismael,

    this workaround did it!

    Much appreciated,
    Many thanks
    Sebastian

    April 13, 2022 at 6:36 pm #1348288
    Rikard

    Hi,

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

    Best regards,
    Rikard

    April 14, 2022 at 1:36 pm #1348393
    stella-experience

    Thank you, Rikard.
    You may close the topic.

    April 14, 2022 at 3:47 pm #1348413
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Header transparency is not kept in mobile view’ is closed to new replies.