Hide Menu on One Page only
-
Is it possible to hide the main menu for only one page using CSS or some other feature? Thanks!
Ruth
-
Hi Diego
I’ve had a look at your site but could only deal with the homepage as all the others caused a 404 error ie page not found.
There are a couple of divs that will turn off the top menu but the one that seems to work for me is the top_nav_out class.
The home page has an id of 22 so I used that in the following code
.page-id-22 .top_nav_out { display: none; }
To solve problems like this it’s just a matter of highlighting the div that will turn it off for all pages and then trying to work backwards towards the page id class.
Sometimes we even have to include all the classes as you can see in the very first solution up above.
Anyway I hope it works for you.
All the very best
Dave FostonDave, you rock! It worked just fine. Thanks so much for looking into this for me.
Hi Diego
A little late in replying, we’re in the process of moving house, so apologies for that. Thanks for your kind words of appreciation. I am really glad I could help.
You take care now.
All the best
Dave FostonWow, Fostonda! I am impressed!
I have been stuck for 2 days and really need help. I have tried so many methods and almost broke my site once.. yikes!
I also tried every method you used with the other members here and it did not work either. Here is my site
I am trying to make landing page that is a gate like page for age verification
I need to be able to remove the top-nav Navigation Bar as well as the top logo from only the static front page
leaving only the text and full image with the buttons for the actual landing page while having the logo and top nav bar show on the rest of the site…
also on some of the pages there is a white footer that i cannot figure out how to get rid of
any further suggestions would be tremendously appreciated
Thank you so much!!
Hi wdtech
A little slow in getting back to you – have been travelling.
I’ve had a quick look at your site and these codes seem to do the trick for me. I’ve tried it on Chrome’s Inspect element and it seems to work.
.home #top { display: none; } .home #header #logo { display: none; }
Hope it helps
Dave FostonAre you kidding me? Don’t you dare apologize… you are a life saver!!!!!
Those codes worked perfect. I will refer your website to anyone who ever needs help with WP. I will likely become a subscriber myself as I will be making more WP sites in the future.
Thank you so much!
I cannot express how appreciative I am!
Thanks for those kind sentiments – really appreciate that.
You take care now
Dave FostonHi
I am trying to build a clean landing page where there are no menus sidebars etc – just a webform + video
How do I hide the menu? Can I also hide the header image if I want to?
https://www.thepraisemethod.com
Thanks
Ray
Hi Ray
Thanks for supplying your url – it really helps finding what to do.
You can hide just about anything you want on any individual page.
There are a couple of menu divs on your page that I found by using Chrome’s Inspect element option. Some didn’t work when isolating with the page div. Both menus you have on the home page can be isolated as follows
.home ul#menu-selected-1, .home ul#menu-selected-2 { display: none; }
If you don’t want to do the work on the home page then replace the .home by .page-id-xx where xx is the page’s id no.
You can find this by again displaying the page and using Inspect element. The page id will be given in the body tag.
Well Ray I hope this helps. You should be able to do the header image in a similar way.
All the best
Dave FostonHelo Ray,
When I was faced with that challenge, I found a free plugin that allows you to set a up a landing page, available at inboundnow dot com slash landing-pages.
You will also need to enter this custom CSS in the ‘CUSTOM CSS” box towards the bottom of the control page of this plugin (page is called “Edit this Plugin”):
.page-id-XXXX .top_nav_out {display: none !important;}
.page-id-XXXX nav#navigation ul {display: none !important;}
.page-id-XXXX footer {display: none !important;}
.page-id-XXXX header {display: none !important;}Hope this works for you.
Diego
Ray,
I meant “(page is called “Edit Landing Page”)” instead of “(page is called “Edit this Plugin”)”.
Sory about the confusion.
Diego
Hello again Dave,
I am facing a few challenges developing my WordPress site at pampermefoods.com where I could definitely use some help. Would you be available for a paid one-hour session to help me out, or recommend someone who might be able to assist?
Namely, I need help setting up the layout on the WooCommerce shop page, coding the featured products and services to show up on the homepage, setting up the sidebars correctly, and other formatting issues.
Please contact me at diego at inbaum dot com and let me know.
Thanks,
Diego
Just to follow up;
I should have said that the code needs to be placed into a style.css file or equivalent. It looks to me that you are using the Responsive theme. It is possible to add your code to the theme through its options. Appearance=>Theme Options=>CSS Styles. Perhaps you should check to see if they are secure when you update the theme. They may be other overheads by doing this.
Often it is best to make a child theme and make your changes/additions to the style.css file of the child theme. This would be sure to avoid losing your changes when the theme is updated.
All the best
DaveThanks Dave
I am not that familiar with css.
I am using infusionsoft and I have installed the inboundnow landing page plugin.
Should I be able to format ba webform and link the fields back to my Infusionsoft fields?
Thanks
Ray
Good info!
- The topic ‘Hide Menu on One Page only’ is closed to new replies.