Support » Plugins » Hacks » Remove Main Menu from one specific page in TwentyFourteen

  • Resolved ialeman

    (@ialeman)


    Hello, guys. I want to remove the main menu from one specific page in my blog using TwentyFourteen theme, only the main menu, and only in one page. I’m guessing I need to add something in my child theme style.css.

    My site is http://www.kcnox.com and the page I want to modify to is id 601. Can you help me?

Viewing 10 replies - 1 through 10 (of 10 total)
  • First you need to install and use a browser inspector like firebug (for firefox, other browsers have equivalent plugins).
    Now browse to and inspect the page you want to hack, you will find that your main menu has:
    id="menu-mymenu1" class="nav-menu"
    Also that the page body has:
    class="home page page-id-418 page-template page-template-page-templates page-template-full-width page-template-page-templatesfull-width-php custom-background masthead-fixed full-width grid"

    You are correct in that you will have to add some custom css in your child theme (full marks here).

    The above snippets of css suggest that what you want is:

    .page-id-418 #menu-mymenu1 {
     display:none;
    }

    OR visibility:hidden;

    Of course you still want to have a way to exit the page!

    Hello Ross, yes it works, but it only removes the main menu links, I want to remove the entire black bar, including the logo and the search function.

    I want to make this page similar to a landing page, in where you have no distractions at all, just the content of the page. If you can also teach me the way to remove the footer from this page, it will be appreciated. Thanks in advance Ross.

    Using firebug I see that the top bar has an id of “masthead”, so the code to suppress it is:

    .page-id-418 #masthead {
     display:none;
    }

    As for the footer, again using firebug I see:
    <footer id="colophon" class="site-footer" role="contentinfo">
    So I can suppress it too with:

    .page-id-418 #masthead, .page-id-418 #colophon {
     display:none;
    }

    It works like a charm. You rock man! Thank you very much.

    As a final observation, there is a gray band in the place the masthead used to be, do you think it’s possible to remove that band so that my page title (the word Contact) gets upwards? And I also would like to center the title only in that page.

    The final page is here: http://www.kcnox.com/contact/

    Again, thank you very much. You rock!

    My browser inspector showed me that it was a top margin, these tags should target it:

    .page-id-47 .masthead-fixed .site-main {
        margin-top: 0;
    }

    Mmmmm, code not working Ross. I’m still seeing the band.

    To center the title:

    .page-id-47 h1.entry-title {
    text-align: center;
    }

    RossMitchell’s code seems correct, but I can’t see it anywhere in the source. Have you added it yet?

    I have added it again in my child css. Take a look , still the same result.

    Respect the code to center the page title, thanks!

    Try this:

    .page-id-47 #page #main {
    margin-top: 0;
    }

    Thanks for the code Ilona, it works and everything is right now, exactly as I wanted.

    Thank you very much to Ilona and Ross Mitchell for their help. I now may mark this topic as resolved.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Remove Main Menu from one specific page in TwentyFourteen’ is closed to new replies.