Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 3, 2017 at 12:10 am #754735
    lzevon

    We have hidden the header on our site in favor of manual header for each page (there’s a valid reason for this). However, when hiding the header using…

    #header_main { display: none !important; }

    … it causes the site to lose it responsiveness as you can see (note text behind the buttons).

    Is there someway to hide the header on our site while still keeping it responsive? This is critical.

    Thanks!

    March 3, 2017 at 12:37 am #754748
    lzevon

    I’m in a child theme and so I removed the entry #header_main { display: none !important; } from the child theme’s CSS file. I then added your code to Quick CSS in the theme control panel…

     <span class="kwd">@media</span><span class="pln"> only screen and </span><span class="pun">(</span><span class="kwd">max-device-width</span><span class="pun">:667</span><span class="lit">px</span><span class="pun">){</span>
     <br>.flex_column.av_three_fourth.flex_column_div.avia-builder-el-3.el_after_av_one_fourth.avia-builder-el-last{<br>display:none !important;<br>} <br></br>
    <span class="pun">}</span>

    … but it is still not responsive?

    I’d rather not have anything in Quick CSS. I’ve provided you with additional info in private content…

    March 3, 2017 at 12:39 am #754749
    Jordan Shannon

    Hey lzevon,
    It looks like you targeted the wrong element. Try adding this to quick css:

    @media only screen and (max-device-width:667px){
    .flex_column av_three_fourth.flex_column_div.avia-builder-el-3.el_after_av_one_fourth.avia-builder-el-last {

    display:none !important;
    }
    }

    Best regards,
    Jordan Shannon

    March 3, 2017 at 12:48 am #754751
    lzevon

    Still not working. Please don’t say the wrong element is targeted, I am merely doing what you asked! I want to hide the header and still have a responsive website.

    Thanks

    March 3, 2017 at 1:03 am #754755
    Jordan Shannon

    Hi,

    I just want to confirm that I understand what you are asking. You want to hide the green section correct? 

    Best regards,
    Jordan Shannon

    March 3, 2017 at 1:39 am #754764
    lzevon

    No. I want to hide the header that is the default header for Enfold. I used: #header_main { display: none !important; }

    I want to show the header you see in green, but I want the site to be responsive. When I use the above CSS it breaks the themes resposniveness.

    Can you please look at the site and view it in responsive mode to see what I am referring to? I have put the code back to the way I had it since we are starting over.

    March 6, 2017 at 11:09 pm #756624
    lzevon

    I need this escalated to someone who can help me resolve this problem. In brief, #header_main { display: none !important; } does hide the header (exactly what I want to do), but also disables responsiveness.

    Thank you

    March 7, 2017 at 10:52 pm #757324
    Nikko

    Hi,

    Try adding this css code, this should adjust the mobile version:

    @media only screen and (max-width:767px) {
  .faux-header {
    max-height: none;
  }

  .fun-filled {
    margin-top: 0;
    margin-bottom: 0;
  }

  .home .av-special-heading.pull-up-40 {
    float: none;
    margin-bottom: 50px;
  }

  .home #after_section_2 .av_one_fourth {
    width: 100% !important;
    margin: 0 auto 30px !important;
  }

  .home #after_section_2 .av_one_fourth img {
    width: 100%;
  }
}

    Hope this helps.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘hiding header breaks responsive views’ is closed to new replies.