• Resolved samij

    (@samij)


    Hi,
    I am trying to create a landing page without any header / nav bar.
    Can someone please let me know what CSS to add to the page in order for this to be removed?
    (page-id-142)

    Many thanks!

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • It depends on what you are using to design the single landing page. Some themes come with the option to hide the header/footer of a single page but if your theme does not have, then you can try this option.

    This option works if you are using Elementor to design your single page. Open your page, then at the page attributes, set it to Elementor Canvas

    Hi @samij !
    I can help you on that, You meant that hide header & nav-bar in a particular > Landing Page!
    For doing the above you should follow the steps:
    1. Add below code in end of the functions.php of your child theme or parent theme:

    add_action('wp_head', 'hide_navbar_unstopbleyou');
    function hide_header_unstopbleyou(){
    if(is_page( 142 )) // your page id to hide header & navbar
    {
    ?>
    <style>
    header
    {
    display:none !important;
    }
    .blog-section
    {
    padding: 0px !important;
    }
    </style>
    <?php
    } //end if
    } // end function

    Hi!
    You can do it from here also:
    1. Goto Pages > select your page > Click on Edit
    2. Goto below settings of the page and select Header>Hidden

    Thread Starter samij

    (@samij)

    I’m trying to hide the logo and menu items on a single page.
    @coder01 – I’d prefer a CSS way of hiding it if possible. That way, I’m not screwing around with the code.

    I’m using the WPBakery Builder if that helps any?
    Unfortunately there are no toggles to switch this on/off within the builder itself.

    Hi!
    You can do it using CSS!
    It would be useful if you are using WPBakery!
    1. Goto Pages, Select the Page you want to hide
    2. Click on Edit with WPBakery
    3. Click on Back-end editor
    4. Click on Add Element
    5. Click on Search Box and type “html”
    6. Click on Raw HTML
    7. Insert to your page that you want to hide
    8. Add below CSS Code:
    <style>
    header
    {
    display:none !important;
    }
    .blog-section
    {
    padding: 0px !important;
    }
    </style>

    Thread Starter samij

    (@samij)

    @coder01 you are AMAZING!! thank you so so so much!
    This worked perfectly ??

    Hi @samij !
    You are welcome dude!
    (y)

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove Entire Header On Single Page’ is closed to new replies.