WordPress.org

Ready to get started?Download WordPress

Forums

Openstrap
[resolved] Hide Menu on One Page only (38 posts)

  1. rtc
    Member
    Posted 5 months ago #

    Is it possible to hide the main menu for only one page using CSS or some other feature? Thanks!
    Ruth

  2. ddfoston
    Member
    Posted 5 months ago #

    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

  3. rtc
    Member
    Posted 5 months ago #

    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

  4. WP Sites - Brad Dalton
    Member
    Posted 5 months ago #

    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.

  5. john_bryan
    Member
    Posted 5 months ago #

    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>
  6. rtc
    Member
    Posted 5 months ago #

    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>

  7. ddfoston
    Member
    Posted 5 months ago #

    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

  8. rtc
    Member
    Posted 5 months ago #

    Website onlyoption.info. Thanks!

  9. ddfoston
    Member
    Posted 5 months ago #

    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

  10. rtc
    Member
    Posted 5 months ago #

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

    Ruth

  11. ddfoston
    Member
    Posted 5 months ago #

    Hi Ruth

    I'm glad it worked for you.
    Dave

  12. EdKing2210
    Member
    Posted 1 month ago #

    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: http://birminghamreview.net/
    Ed

  13. ddfoston
    Member
    Posted 1 month ago #

    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

  14. EdKing2210
    Member
    Posted 1 month ago #

    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

  15. ddfoston
    Member
    Posted 1 month ago #

    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

  16. dieguito99
    Member
    Posted 1 month ago #

    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

  17. ddfoston
    Member
    Posted 1 month ago #

    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 Foston

  18. dieguito99
    Member
    Posted 1 month ago #

    Dave, you rock! It worked just fine. Thanks so much for looking into this for me.

  19. ddfoston
    Member
    Posted 1 month ago #

    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 Foston

  20. wdtech
    Member
    Posted 1 month ago #

    Wow, 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!!

  21. ddfoston
    Member
    Posted 1 month ago #

    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 Foston

  22. wdtech
    Member
    Posted 1 month ago #

    Are 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!

  23. ddfoston
    Member
    Posted 1 month ago #

    Thanks for those kind sentiments - really appreciate that.

    You take care now
    Dave Foston

  24. etarainman
    Member
    Posted 4 weeks ago #

    Hi

    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?

    http://www.thepraisemethod.com

    Thanks

    Ray

  25. ddfoston
    Member
    Posted 4 weeks ago #

    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 Foston

  26. dieguito99
    Member
    Posted 4 weeks ago #

    Helo 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

  27. dieguito99
    Member
    Posted 4 weeks ago #

    Ray,

    I meant "(page is called "Edit Landing Page")" instead of "(page is called "Edit this Plugin")".

    Sory about the confusion.

    Diego

  28. dieguito99
    Member
    Posted 4 weeks ago #

    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

  29. ddfoston
    Member
    Posted 4 weeks ago #

    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
    Dave

  30. etarainman
    Member
    Posted 4 weeks ago #

    Thanks 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

Reply »

You must log in to post.

About this Theme

About this Topic

Tags