Hide menu in the header on specific page

[Jelmert]

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

[Chris-M · Accepted solution]

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

[Chris-M · Accepted solution]

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

[Chris-M]

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

[Chris-M]

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

[Jelmert]

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 🙂

[Chris-M · Accepted solution]

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

[CBorst]

Hi Chris, 

I am trying to accomplish the same thing on a website page. I entered the code into the head HTML, but no luck. Is there a different way to accomplish this on a website page and not a landing page?

[KKniazev]

Hi Chris,

Any updates to this? Also trying to remove the navigation at the top of a specific landing page and this code is not working for me when I add it to "Additional code snippets" section.

Thanks, in advance.

[Chris-M]

Hey @KKniazev,

If you like I can look into the issue. Can you share your landingpage or the preview, with us to assist you further and to provide you with a suiting code for your page.

- Chris

[Chris-M]

Hey @KKniazev,
thanks for the URL via PM/DM, i guess you want to remove the white spacing on the top of the page, right?
You can try the following

.header {
  display: none;
}

But keep in mind, if you put this in your global css, you will remove every Header of your pages, so put this in for just the templates/pages in which you want to remove the header via css.

[KKniazev]

Thanks, Christian. This worked well!

[KSchultz]

Hi Chris!

I want to achieve something similar by wanting to hide the header entirely, especially the logo. 

Is there code that can achieve thise?

Thanks in advance.

[Chris-M]

Hello @KSchultz

Sure. Could you provide us with a preview page or some kind of source code? This would speed up the process a lot.

Thanks

- Chris

[KSchultz]

Hi!

Thanks for your reply. Sorry for the delay in getting back to you, my email platform sent your message into quarantine! We are hoping to recreate the following header and footer (the nav specifically) on our landing pages. Can you help us?

Healtheinc.com

[cid:image001.png@01D71FE3.4FB10F00]
As you can see, the nav is on top of the graphic and that's the idea for the Hubspot landing page as well. We do not need the yellow bar "Florida Department..."

[cid:image002.png@01D71FE3.4FB10F00]


Kristin Schultz
Content Director
518.387.9637
www.mmcweb.com

[signature_1329240607]
Growth, reinvented.

CONFIDENTIALITY NOTICE: This e-mail transmission may contain information that is proprietary, confidential or legally privileged. The information is intended only for the individual or entity named in the e-mail address. If you are not the intended recipient, you are hereby notified that any use, disclosure, copying, distribution, continued possession, or reliance upon the contents of this e-mail is strictly prohibited. If you have received this e-mail transmission in error, please notify the sender so that we can arrange for proper delivery, and then delete all copies of this message. Thank you.

CONFIDENTIALITY NOTICE: This e-mail transmission may contain information that is proprietary, confidential or legally privileged. The information is intended only for the individual or entity named in the e-mail address. If you are not the intended recipient, you are hereby notified that any use, disclosure, copying, distribution, continued possession, or reliance upon the contents of this e-mail is strictly prohibited. If you have received this e-mail transmission in error, please notify the sender so that we can arrange for proper delivery, and then delete all copies of this message. Thank you.

[Jelmert]

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?

[Chris-M · Accepted solution]

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

[Jelmert]

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.

<style>.header__menu.header__element,.header__cta--desktop,.header__search--wrapper,body .header__navigation--toggle {
display: none;
}
</style>

I'm working on this page:

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

Hope you can help

[Jelmert · Accepted solution]

Got it to work with this 😄

<style>..header__menu.header__element,.header__cta--desktop,.header__search--wrapper,body .header__navigation--toggle {
display: none!important;
}

</style>

[phipps]

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

[Jelmert]

It is still working for me yes. 

<style>.header__menu.header__element,.header__cta--desktop,.header__search--wrapper,body .header__navigation--toggle {
display: none!important;
}

</style>

[Chris-M]

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

[Jelmert]

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.