Removing A Menu Bar On Certain Pages…

[Historical Forums User]

I have a squarespace website and I’d like to remove a menu bar from certain pages. I’d like to add some custom CSS on the pages I don’t want the menu bar displayed.

Here is a typical page with the menu bar:
https://s72businessportraits.com/who/

How would this be possible?

Thanks!

[Beverleyh]

There seems to be an id on the body element that is unique to each page – use the developer console to see (F12).

You can use this id to target specific pages in the CSS.

So if the body id on the Contact page is “contact”, and you wanted to hide a menu with a class of “menu”, you could put this in your CSS;

#contact .menu { display:none }

And the menu would only be hidden on the Contact page.

[Historical Forums User]

Thank you for the reply…

unfortunately that didn’t work, or I’m doing it wrong.

For this page:
https://s72businessportraits.com/who/

I found the body id: collection-58b04c4e37c5814f6636bd7e so I put in the code
#collection-58b04c4e37c5814f6636bd7e .menu { display:none }

The menu still displayed.

Any ideas?

Thanks again!

[Beverleyh]

That was just an example – please adapt it to your own markup. You will need to check what class/id the menu can be targeted with and modify the sample CSS selectors appropriately.

[Atelierbram]

The menu on the page has these two classes set: Header-nav Header-nav--primary, so to target that one:

#collection-58b04c4e37c5814f6636bd7e .Header-nav--primary {
  display: none;
}

Using DevTools, ‘inspect element’ will help you find these things.

[Historical Forums User]

Bingo… Thanks!

[Beverleyh]

No problem, glad to help.

[Author]

Posts