Hide Menu on One Page only

Hi Ruth

If it’s the home page you can specify the home page in css.
Something like this should do the trick

.home #nav-container {
display: none;
}

.home specifies to work only on the home page.
#nav-container is the id for the navigation – I was on a site using wooThemes Canvas
display:none; just tells the site not to display the menu

if it’s on another page you’ll have to replace .home with the page id.

I hope this helps
Dave

Thanks for the quick reply Dave! I tried the code below (since it is not the home page) and it’s not working. Is this the right way to code?

.page-id-2 #nav-container {
display: none;
}

I can still see the menu on page #2. I also tried your code for Home to see if that would work and it did not. Any ideas for this theme? Thanks!

Ruth

Grab the i.d from body class section of the source code and the class for the menu and add the CSS at the end of your style sheet.

Impossible to say without inspecting your site as different themes use different classes.

This is slightly hackish, but if you’re in a bind, you could just put the css in style tags directly on the page you want to change. Open the page up in the wordpress editor and add this:

<style type="text/css">
#nav-container {
display: none;
}
</style>

John and Brad,
I tried both of these solutions and they are not working. I am using a child theme of Twitter Bootstrap. I think I followed the instructions above and it looks like the menu is referred to as “menubar”. So I replace that in both of the techniques above. The page number I used above is correct: page-id-2. Not sure what I am doing wrong. Any additional help will be much appreciated!
————— I put this in the Edit CSS.
.page-id-2 #menubar {
display: none;
}
—————-also tried on page
<style type=”text/css”>
#menubar {
display: none;
}
</style>

Hi Ruth

Please add a link to your page. It will then be possible to check the code from there and perhaps work a possible solution
Regards
Dave

Website onlyoption.info. Thanks!

I’ve had a look at your site. The code that turns off the menu is:

.navbar.navbar-inverse.navbar-static-top {
display: none;
}

But this will do it on all pages! Working back through your html structure I was able to get this to work on Google’s Chrome inspector

.page-id-403 #bodychild #wrap .navbar.navbar-inverse.navbar-static-top {
display: none;
}

Obviously 403 was the page I was working on at the time. I have to say it seemed a little hit or miss but it did actually work eventually.

I hope this works for you when you put it into the style sheet as perhaps the only other way would be to adapt your header.php file to test for the page where you want the change to occur.

All the best
Dave

WOW Dave! It works beautifully! I would never have been able to figure that out on my own! Thanks so very much!

Ruth

Hi Ruth

I’m glad it worked for you.
Dave

I’m trying to hide/remove the Primary Menu from my home page only – using Canvas

I tried the CSS code above and nothing has worked – any ideas or help would be greatly appreciated.

As it stands: https://birminghamreview.net/
Ed

Hi Ed

Thanks for sharing your url – it really does make a big difference to be able to see the live site.

I guess the code changes a little over time when either there is a slight upgrade or when we set different things in Canvas. I would have to do far more testing to be able to say for sure.

I really like to use Canvas – I think it’s a great theme.

That said I was able to switch off the menu with

#navigation ul {
display: none;
}

but this didn’t work when trying to isolate the home page.

I also found that this also does the trick;

nav#navigation ul {
display: none;
}

And it also seemed to work through Chrome’s inspector with this

.home nav#navigation ul {
display: none;
}

I tried this code with one of your other pages and for sure it didn’t switch off the menu which is what you want.

I hope this works when you add the code to your style sheet – I tend to make a Canvas child theme and a custom.css file in that to store all my own css coding.

All the best I hope it works for you
Take care
Dave

Thanks Dave/fostonda – the first code worked perfectly. Chuffed mate – really appreciate your help.

I’m new to web design, deciding to learn it so I could actually be involved in the process, and Canvas is a reassuringly versatile. I just run into the occasional brick wall.

Thanks again, Ed

No problem Ed – just keep getting stuck into it – there’s loads to learn but take your time and be patient.

I’m glad it worked for you
All the best
Dave

Fostonda, I was able to hide header and footer using:

.page-id-2370 nav#navigation ul {display: none;}
.page-id-2370 footer {display: none;}
.page-id-2370 header {display: none;}

..on the CSS of a page called “Test Landing” at my WordPress site pampermefoods.com.

BUT… I am unable to hide the email and phone number along with all the social icons at the top of the page.

Any suggestions as to what code to use there?

Please advise.

Thanks,

Diego