Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 30, 2017 at 5:34 pm #883513
    WP Turned UP

    Hello. For Header Behavior I have everything unchecked. For each page I have a background color defined for Color Section 1. I need ALL devices sizes to show the same transparent header, just like iPad portrait and above shows.

    Please see this image for the issue

    Thank you,
    Ryan

    .

    December 2, 2017 at 10:28 am #884100
    Yigit

    Hi Ryan,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 767px) {
#top #wrap_all .header_color.av_header_transparency {
    position: absolute!important;
    background: transparent;
}}

    However your content would move below your header. You can add a separator/whitespace element and choose to display it only on mobile to solve that issue :)

    Best regards,
    Yigit

    December 3, 2017 at 5:38 am #884258
    WP Turned UP

    Thanks, but there has to be another way. Adding whitespace or a separator to every page is not practical.

    December 3, 2017 at 5:43 am #884259
    WP Turned UP

    Every time a do a project and introduce a different Header and Transparency option, I run into this issue. If we set a header option for a page, it should work across ALL media queries.

    December 3, 2017 at 5:18 pm #884365
    WP Turned UP

    When support looks at the site, it may appear to be “fixed”. I manually went in and added CSS to cover the header background color of EACH page.

    Please provide a solution that doesn’t require all of this CSS and doesn’t require remembering to do this for every new post/page that’s added.

    Thanks!

    December 4, 2017 at 12:30 am #884472
    Yigit

    Hi,

    Please use the code as following

    @media only screen and (max-width: 767px) {
#top #wrap_all .header_color.av_header_transparency {
    position: absolute!important;
    background: transparent;
}
#header.av_header_transparency + #main > .container_wrap .container {
    padding-top: 90px;
}}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    December 4, 2017 at 5:00 pm #884708
    WP Turned UP

    Thanks, but that padding causes the need for more CSS (e.g. negative margins, negative padding) of other elements.

    If a page has a Blue background for Color Section 1 and the header is set to Transparent with Border, the header is Blue across desktop, iPad Landscape and iPad Portrait.

    Why in the world would this NOT flow down to all smaller devices. Unless I’m missing something this makes no sense. You shouldn’t have to mess with padding, margins, position or any other settings that “position” an element. when we are ONLY talking about colors here.

    December 6, 2017 at 4:38 pm #885654
    Yigit

    Hi,

    I will share this thread with my teammates and ask if they could come up with another solution and will share your request to keep transparent header transparent on mobile :)

    Best regards,
    Yigit

    December 6, 2017 at 4:51 pm #885659
    WP Turned UP

    Thank you. I submitted a feature request this morning.

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