Having trouble getting the header/masthead to hide on a single page.

  • Resolved nathanarcher

    (@nathanarcher)


    6 years, 1 month ago

    I want the menu and header to be gone on a specific page but remain elsewhere. I’ve done quite a lot of research and tried a lot of different CSS modifications, but nothing seems to be working. Beaver Builder is supposed to have a “Remove Head/Footer” option in the Page Attributes, but for some reason it’s not there for me (it appears to be removed in recent versions, reverting to older versions has caused me problems). My end goal is to have an embedded HTML5 app to remain, with a banner ad at the very top (having it embedded within a WordPress style makes it draw weird). What I’ve tried so far from what I’ve read is to edit “Additional CSS” in Beaver Builder, which I’ve done through all of these:

    .page-id-1487 .fl-page-header-wrap{
    display: none;
    }

    .page-id-1487 .site-navigation .main-navigation{

    display: none;

    }

    .postid-1487 header#masthead { display: none; }

    .postid-1487 #menu-item,
    .postid-1487 #menu-primary-menu-container {
    display: none;
    }

    .page-id-1487 .site-navigation .main-navigation{

    display: none;

    }

    Also tried this in functions.php

    if ( is_page(1487) ) {

    // Remove Styles
    wp_dequeue_style( ‘parent-style’ );
    wp_dequeue_style( ‘child-style’ );
    wp_dequeue_style( ‘parent-style-css’ );
    wp_deregister_style( ‘parent-style’ );
    wp_deregister_style( ‘child-style’ );
    wp_deregister_style( ‘parent-style-css’ );
    }
    }

    They’re all supposed to work, but none of them are. I’m perplexed.

    Inspecting element on the page gives me this:

    View post on imgur.com

    The last style present is my code that is supposed to override the style.

    Removing this code deletes the correct part leaving only some formatting issues, I just don’t know how to do that on my page: https://i.imgur.com/80kJAuW.png

    A possible thing I may have screwed up is this: https://i.imgur.com/D9S8vE4.png

    I don’t remember what the default value was, I deleted it while tinkering and I don’t know what was there in the first place so I just put the first value that looked like it was the right thing.

    If you’d like to inspect the URL, you can do so here: https://newfastuff.com/meme-generator/mobile/

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @nathanarcher,

    Thanks for getting in touch!

    The No Header/Footer template which you can select under Page Attributes is only available on the Beaver Builder theme.

    The snippets you shared aren’t working since the theme your site is on uses a different set of classes and ID for the header.

    The snippet below should do it. ??

    .page-id-1487 #header, 
.page-id-1487 #footer {
  display: none;
}

    Ben

Viewing 1 replies (of 1 total)
  • The topic ‘Having trouble getting the header/masthead to hide on a single page.’ is closed to new replies.