Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1302727

    Hi there,
    I’m wondering if you can help with some code to remove an annoying white header I can’t seem to hide. It is obviously connected to the Sticky Header custom size and I have tried the following code which hasn’t worked;

    .page-id-932.html_header_sticky #top #wrap_all #main {
    display:none! important;

    My aim is to have one single page work as a ‘pop-up’ with no header or footer or navigation (without using a pop-up plugin).
    Any suggestions much appreciated!


    You do not think about the padding-top of #main caused by a header calculation height.

    The solution is actually very simple, by not selecting the default template, but “Blank – no header no footer”.

    You open the editor for this page and right at the meta boxes you see Template.


    EDIT: sorry didn’t see that you like to have that as popup – so read the next Answer
    But if your visitors want to navigate further on your page – how do you want to offer that?

    you can place a button for instance that will go back in browser history – just place a button and give a custum-class to it: goback
    this to child-theme functions.php:

    function go_back_button(){
    <script type = "text/javascript">
      $('.goback').on('click', function(e){
    add_action( 'wp_footer', 'go_back_button' );

    remove all css rules trying to get rid of the headers of that page. The mentioned template will do the job and will think of the right padding for #main
    a page popup is done easily by the page link followed by ?iframe=true
    f.e.: see here a demo page :
    on the right button i have inserted as link :
    that is my “Maintenance Mode” Page
    Left is an external page of mine.


    Thanks Guenni007. The ‘goback’ code works perfectly!

    I’ve removed the CSS and actioned the ‘Blank – No Header, No Footer’ template, however the white header is still at the top of the page.
    Any further suggestions?


    you have still some rules concerning to padding-top of #main in your css set to !important

    you got this rule in your css:

    @media only screen and (min-width: 787px) {
    	#header_meta { display: none !important; }
    	.html_header_top.html_header_sticky #top #wrap_all #main {
    	    padding-top: 170px !important;

    the rule of a blank page layout :

    #top.avia-blank #wrap_all #main {
        padding-top: 0 !important;
        margin: 0;

    comparing the selectors – the first has one class more than the second – so it will win the game ;)
    is the first rule a custom rule in your quick css ?

    you can overwrite that rule by:

    .html_header_top #top.avia-blank #wrap_all #main {
        padding-top: 0 !important;
        margin: 0;

    The first rule is an enfold rule but not set to !important on default.
    is there any reason to set it this way?


    Thanks Guenni007 – that worked perfectly : )
    I very much appreciate your help!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Hide Sticky Header on Single Page’ is closed to new replies.