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]

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

[Jelmert]

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. 

[Chris-M]

@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

[Jelmert]

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

[Jelmert]

Ah, worked it out with this 

<style>
.footer__columns {
display: none;
}
</style>

@Chris-M 

[Jelmert]

Thanks again! Seems to work 

[Jelmert]

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

Thanks for the help!