topic Re: Hide menu in the header on specific page in CMS Development

Hide menu in the header on specific page

Jelmert — Fri, 24 Jul 2020 08:37:11 GMT

Hello,

I would like the hide the menu in the header on pages like a landing page. Is there a code I can add to the additional html in the settings? I can change it in the global editor, but then I have no menu on all my pages

Page: http://www-hrorganizer-com.sandbox.hs-sites.com/nl-nl/assessments?hs_preview=sggFrzwe-32737829920

Re: Hide menu in the header on specific page

Chris-M — Fri, 24 Jul 2020 09:25:10 GMT

Hello @Jelmert,

Basicly you have 2 ways, to archive this.

Best way is to copy the template and remove the navigation and use the copy template for landing pages.

The other way is, remove it via css on the page settings -> advanced options -> Additional code snippets, with the following CSS code

<style>
  .header__menu.header__element, .header__search--wrapper {
    display: none;
  }
</style>

This should remove the navigation and the search button on this page.

- Chris

Re: Hide menu in the header on specific page

Jelmert — Fri, 24 Jul 2020 09:14:28 GMT

Thanks @Chris-M !

This did hide the menu, but for some reason it did not hide the search button/icon. (using the code)

I'll give the other option a try if there is no solution for this. Thanks for the quick response and help 🙂

Re: Hide menu in the header on specific page

Chris-M — Fri, 24 Jul 2020 09:26:18 GMT

Hello @Jelmert,

i messed up a bit... i missed the "." for the class, this should now work

<style>
  .header__menu.header__element, .header__search--wrapper {
    display: none;
  }
</style>

- Chris

Re: Hide menu in the header on specific page

Jelmert — Fri, 24 Jul 2020 09:49:25 GMT

Thank you @Chris-M , works like a charm.

Thanks for the help!

Re: Hide menu in the header on specific page

Jelmert — Tue, 11 Aug 2020 15:03:23 GMT

Het @Chris-M The code works, but we see in hotjar that people can still see a 'hamburger 'menu when they view it on mobile. It is just not clickable, any way to fix this?

Re: Hide menu in the header on specific page

Chris-M — Tue, 11 Aug 2020 15:53:33 GMT

Hey @Jelmert,

just replace the old code with:

.header__menu.header__element, .header__search--wrapper, body .header__navigation--toggle {
  display: none;
}

The "body .header__navigation--toggle" is for the mobile Nav.

- Chris

Re: Hide menu in the header on specific page

Jelmert — Wed, 12 Aug 2020 07:23:52 GMT

Thanks again! Seems to work

Re: Hide menu in the header on specific page

Jelmert — Wed, 09 Sep 2020 11:05:38 GMT

Hey @Chris-M

Do you know a code to hide the footer as well?

For example for this page: https://www.hrorganizer.com/nl/selectie-selectie

Thanks in advance.

Jelmer

Re: Hide menu in the header on specific page

Jelmert — Wed, 09 Sep 2020 11:31:06 GMT

Ah, worked it out with this

@Chris-M

Re: Hide menu in the header on specific page

Jelmert — Thu, 10 Sep 2020 09:31:46 GMT

Hi @Chris-M

Sorry to bother you again, but had another question.

I updated the header, but now i cant seem to get the navigation to hide in the header.

This is the code im using, it hides everything but not the search icon for some reason.

I'm working on this page:

https://www.hrorganizer.com/nl/bias-free-e-assessment?hs_preview=VlNlPoeQ-33713765252

Hope you can help

Re: Hide menu in the header on specific page

Jelmert — Thu, 10 Sep 2020 12:16:43 GMT

Got it to work with this 😄

</style>

Re: Hide menu in the header on specific page

Chris-M — Thu, 10 Sep 2020 12:23:03 GMT

Hello @Jelmert,

sorry for the late response, i was about to answere your question, but you just figured all out by yourself, which is great!

I think there might be a typo in you style call, you have 2 "..header__menu.header__element" on the start of your class, should be just one ".header__menu.header__element"

- Chris

Re: Hide menu in the header on specific page

Jelmert — Thu, 10 Sep 2020 12:29:59 GMT

Ah indeed a typo. Thanks for the response anyway, maybe you could help me with something else.

Im trying to get a smaller font in the legal text in my footer. I cant edit it in the theme and i cant change anything in the code. So i tried adding:

"<style>.legal-consent-container {font-size:12px;}!important;

</style>"

I tried adding the important to see if that would help, but no luck. For example im using this page: https://app.hubspot.com/content/294088/edit/32583948686/content

The text is in a form, which normally i can edit. But it being in the footer i cant edit it.

Re: Hide menu in the header on specific page

Chris-M — Thu, 10 Sep 2020 12:43:02 GMT

Hey @Jelmert,

You need to go a bit deeper into the css classes of this container,

Could you try the following:

.legal-consent-container p { font-size: 12px; }

If you ever want to put an !important tag to an style command, you have to put it in the brackets to the command, for example:

.legal-consent-container p { font-size: 12px !important; }

Just as an example:

You've tried to give the font-size command the yellow marked container, but the paragraph element is the one, which is displaying the text, so if you want to reduce the text size the p element needs the command.

- Chris

Re: Hide menu in the header on specific page

Jelmert — Thu, 10 Sep 2020 12:54:17 GMT

Thank you again!

.legal-consent-container p {
  font-size: 12px;
}

This worked for me. The only way to do this global, is to change the code in the template/theme right?

Thanks again, I'm learning as I go.

Re: Hide menu in the header on specific page

Chris-M — Thu, 10 Sep 2020 14:18:29 GMT

@Jelmert

There are a couple of ways.

It really depends on how you are using CSS.

The best way for me would be to start/use a CSS file inside the Design Manager and link this stylesheet to your Template under "linked stylesheet"

The template will basicly receive all the styling you have done inside the styles.css file, if you update the file it will be automaticly updated on the template/pages.

- Chris

Re: Hide menu in the header on specific page

phipps — Sat, 28 Nov 2020 19:56:54 GMT

Is this still working for you today? I'm not able to get this to remove on the mobile nav.

Re: Hide menu in the header on specific page

Jelmert — Thu, 03 Dec 2020 14:08:29 GMT

It is still working for me yes.

</style>

Re: Hide menu in the header on specific page

Chris-M — Thu, 03 Dec 2020 14:25:00 GMT

Hello @phipps welcome to the community!

We are happy to help you, but please start a new thread.
If possbile with a link to the live page or a HubSpot peview link.

This is going to help us a lot and speed up the process a lot to solve your probleme.

- Chris