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

    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.



    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…


    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


    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.




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

    Best regards,
    Jordan Shannon


    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.


    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



    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,

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