hide menu from blog pages

• 

  besidu · Member · Apr 25, 2017 at 6:14 am

  • Copy link
  • Add topic to favorites

  I’d like to hide the menu on my blog pages please

  they will give you rules which you can add under Customizer >> CSS to hide the menu for your blog page.

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 25, 2017 at 8:56 am

  • Copy link

  Hello @inesbouvet,
  Tho you can hide the menu using CSS, but it’s not mandatory because you can also hide menu items from the Site Customizer. On the sidebar of the Customizer click on the Menus > tab. Click on Primary. Now just open the menu item you want to hide/remove-by clicking on it and click the red Remove link. Finally click Save & Publish.

  TIP: You can also restore the menu items by clicking on the Add Items button.

  HIDE MENU ITEMS USING CSS:
  If you still wanna use CSS, then try this code:

  #menu-item-228 {
      display: none;
  }

  Make sure you replace #menu-item-228 with the ID of the menu item that you want to hide.

  How to get the ID of the menu item?
  Open you site on your browser, right click on the menu-item that you want to hide and click Inspect/Inspect element.

  You will find a code for the menu item which will look something like this:

  <li id=”menu-item-228″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-228″>About us

  The ID is marked bold.

  Hope this helps 🙂

• 

  besidu · Member · Apr 25, 2017 at 9:31 pm

  • Copy link

  Hi, I don’t want to hide menu from the primary menu (the one that is on all pages of my website) but just those in the blog pages.
  How can I do that?
  Thx, Ines

• 

  otpidusprime · Member · Apr 26, 2017 at 8:19 am

  • Copy link

  When you say blog page which page are your referring to? Can you provide the link to the blog page? Because i cannot see any link named blog on your site’s menu-bar.

  Thanks.

• 

  otpidusprime · Member · Apr 26, 2017 at 8:19 am

  • Copy link

  CORRECTION:
  When you say blog page which page are you* referring to?

• 

  besidu · Member · Apr 26, 2017 at 8:49 am

  • Copy link

  Hi,
  the pages that are inside this link https://besidu.com/products/blog/ and each post pages (like this https://besidu.com/2017/04/23/install-door-casing/)

• 

  otpidusprime · Member · Apr 26, 2017 at 9:55 am

  • Copy link

  @inesbouvet you are talking about menus under categories on the sidebar, right? Or the menus on the menu-bar of the blog page? Or something else?

• 

  besidu · Member · Apr 26, 2017 at 5:32 pm

  • Copy link

  I am talking about menu on the top right menu-bar of the blog page

• 

  otpidusprime · Member · Apr 26, 2017 at 6:11 pm

  • Copy link

  Okay so you want to hide the menu-bar only from the blog page?

  If that’s a yes, then i am afraid you cannot do that.
  If you hide that from the blog page you will be hiding it from all the pages.

• 

  besidu · Member · Apr 26, 2017 at 6:43 pm

  • Copy link

  ok thanks

• 

  otpidusprime · Member · Apr 26, 2017 at 7:03 pm

  • Copy link

  @inesbouvet sorry for so much juggling around and finally providing you with a negative answer.

  Thanks and again, sorry for so much of inconvenience.

• 

  thesacredpath · Member · Apr 28, 2017 at 7:26 am

  • Copy link

  @inesbouvet, and @otpidusprime, actually we can hide the menu from specific pages with CSS. In the opening body HTML tag of each page, there typically are unique CSS classes we can use to target the page. In the case of the “blog” page, there is a “blog” CSS class set in the body tag. This CSS will hide the top navigation from the blog page and on single post pages (using the “single” CSS class from the body tag on single post pages), in Sequential, and leave about a 30px tall purple band at the top.

  .blog .site-header .wrapper {
  	display: none;
  }

  The one thing I’ll point out is that there is no way for the visitor to easily get back to the home page, or back to the blog page if they are on a single post page, except by clicking the back button in their browser.

• 

  otpidusprime · Member · Apr 28, 2017 at 8:07 am

  • Copy link

  @thesacredpath i did forget about that… Thank You for taking care of this thread 🙂

  My bad @inesbouvet!

• 

  besidu · Member · May 2, 2017 at 9:10 pm

  • Copy link

  @thesacredpath sorry I just saw your post!!!
  It works indeed, thanks for the tips!

  Then do you know how I can undisplay the “menu on the bottom right” about besidu ? I don’t know what it’s that, looks like to “sign up/log in” to wordpress account

  @otpidusprime np

  thx a lot
  Ines

• 

  thesacredpath · Member · May 3, 2017 at 2:19 pm

  • Copy link

  Are you talking about the square with the three dots? If so, the following custom CSS will hide that.

  #actionbar {
  	display: none;
  }

  If you are talking about something different, please let me know.

• 

  besidu · Member · May 4, 2017 at 7:34 am

  • Copy link

  @thesacredpath that’s what I mean, you’re awesome, thanks :)

• 

  thesacredpath · Member · May 5, 2017 at 6:59 am

  • Copy link

  Hooray and you are welcome!

• 

  besidu · Member · May 9, 2017 at 6:50 am

  • Copy link

  @theascredpath, sorry to disturb but looks like the menu at bottom of the page is still apparent on “blog pages” I am talking about your answer dated May 3, 2017, 7:19 AM , the square with the three dots.. I
  added your code so it is not displayed on homepage and other pages , but still showing on “blog pages”… can we delete it also?
  thanks

  #actionbar {
  display: none;
  }

• 

  otpidusprime · Member · May 9, 2017 at 7:54 am

  • Copy link

  @inesbouvet are you talking about this page?
  https://besidu.com/products/blog/

  If yes, then i cant see the that square with the three dots there. Were yo able to sought this out yourself?

  If that’s not the page, can you please provide the link to the page your are talking about?