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
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
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 
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
Thank you @Chris-M , works like a charm.
Thanks for the help!
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?
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
Thanks again! Seems to work
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
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
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>
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
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: Edit Page | HubSpot
The text is in a form, which normally i can edit. But it being in the footer i cant edit it.
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
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.
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
Is this still working for you today? I’m not able to get this to remove on the mobile nav.
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>
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.
