Home>Support>Remove masthead from a single page

Remove masthead from a single page

I have tried the css from a previous thread without luck. I want to leave the menu masthead on the home page but would would like the option to remove it from other specific pages. The ability to remove the footer on those specific pages would be great as well.

Thank you

URL: https://www.serviceconnectioninc.com/largeoutdoorstoragesheds/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    Hi phasma31

    Here are the two selectors you might use under Appearance > Custom CSS for this:

    /* Vantage Hide Masthead Including Menu */
    
    header#masthead { display: none; }
    
    /* Vantage Hide Masthead Not Including Menu */
    
    header#masthead .hgroup { display: none; }
    

    To use either of these for a specific page you’ll need to inspect the page source using your browser’s developer tool (https://siteorigin.com/basics/modifying-theme-design-with-custom-css/), find the unique body class and prefix the selector with that body class. For example, the unique body class for this page we’re talking on right now is:

    .postid-4505
    

    So we’d say:

    /* Vantage Hide Masthead Including Menu */
    
    .postid-4505 header#masthead { display: none; }
    
  2. 7 years, 3 months ago phasma31

    My believe my terminology may be off, I need to be able to remove the main navigation bar and the footer from the page in question.

    I tried this with no luck

    /* Remove Navigation*/

    .page-id-1629 main navigation { display: none; }

    Thank you

  3. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    This is how you’d hide the menu:

    .page-id-1629 .main-navigation { display: none; }
    

    Not the starting period to indicate a class for main-navigation and the hyphenation of the words. Our tutorial on Custom CSS will demonstrate how to inspect page source code if you’re not up to speed with that: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

    This is how you’d hide the footer:

    .page-id-1629 #colophon { display: none; }
    
  4. 7 years, 3 months ago phasma31

    Added the following to the custom CSS and updated

    /* Remove Navigation */
    .page-id-1629 .main-navigation { display: none; }

    /* Remove Footer */
    .page-id-1629 #colophon { display: none; }

    Still not working, I have viewed the

    Nothing was removed.

    I have watched the “Page: Modifying Theme Design with Custom CSS” and I’m confident I could successfully change the HEX color on pitch but the items I need help with are proving to be elusive.

    The theme i was using prior to vantage(Vantage is wonderful btw, thank you) was responsive pro by cyber chimps and it had a page template called Landing Page” that would remove the nav menu and the footer. This would be a useful feature as I have seen it on a number of other threads. The need to remove these items exist on a lot more pages.

    Thank you for your assistance on this pesky issue.

  5. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    Thanks for the feedback.

    Please send through a link to the page you’re trying to do this on and I’ll take a look.

  6. 7 years, 3 months ago phasma31

    https://www.serviceconnectioninc.com/largeoutdoorstoragesheds/

  7. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    Ok so a couple things happening there.

    There is an un-closed selector so everything after that doesn’t apply.
    One of your selectors is using an ID (#) instead of a class, although the body class says id in it, it’s a class.

    Here is how everything should look:

    /* Menu Padding */
    
    .main-navigation ul li a {
    padding-right: 20px;
    padding-left: 20px;
    }
    
    /* Links */
    #main a { color: #f47e3c; text-decoration: none !important; }
    #main a:hover { color: #000000; text-decoration: none !important; }
      
    
      
    /* Remove Navigation */
    .page-id-1629 .main-navigation { display: none !important; }
      
    /* Remove Footer */
    .page-id-1629 #colophon { display: none !important; }
    
  8. 7 years, 3 months ago phasma31

    Thank you for the help, worked like a champ. :}

    Is there a formal route to request the landing page template be added to a future build?

    Regards,

    Trent

  9. 7 years, 3 months ago Andrew Misplon Hi, I Work Here

    Super, glad that helped.

    Here we go: https://siteorigin.com/suggest-feature/.

  10. 6 years, 6 months ago Larry

    I’ve tried to remove the masthead from my page…

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

    and this is not working. Has something changed?

  11. 5 years, 5 months ago Kristin Pedderson

    Is it possible to remove the header widget from all POSTS?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More