Hide menu bar from home page only

morgeorgeremy

Hey everyone !

I'm actually trying to get rid of the menu on my home page from my website
https://morganremmy.com

I actually managed to do it with that custom CSS below
.slug-home #menu-item-534 { display:none; }

But overtime I get back to my home page from a project the content is disappearing
Is anybody's got an idea to avoid that issue ?

Thanks

Morgan

mariusjopen

Hi @morgeorgeremy

Do you have Wordpress and Laytheme updated with the newest version?

The whole content of the home pages disappears sometimes? I was not able to find this error.

Which browser do you use?

Best!

Marius

morgeorgeremy

Hello @mariusjopen

Thank you for your reply. My version of Laytheme is now up to date.

I actually replaced the home page so it doesn't crash anymore. I'm now looking for the proper code to type in the CSS custom field in order to make the menu disappear from my home page.
I'm actually using both safari and google chrome
Do you have any idea on how to do it ?

Thank you very much.

Morgan

morgeorgeremy

Okay I just corrected the problem. That was an issue with my thumbnails.
But I'm still trying to hide the menu

morgeorgeremy

Okay I finally found how to do it ! Problem solved !!

Thanks anyway @mariusjopen ;)

Have a great day

mariusjopen

Hi @morgeorgeremy
:-)

Yes!

I am happy our managed it!

Have a beautiful day!

Marius

rioma7

How did you do? Cannot find Marius' suggestion...

Richard

Dear @rioma7

What are you trying to achieve? are you trying to make your menu disappear?

Could you post a link to your website if possible? :)

Best wishes and have a wonderful day

Sincerely
Richard

rioma7

@Richard-Keith Dear Richard,

I have the menu bar on my website but, I don't want to have it on my homepage. that's it. Actually, I cant share the website cause is not published yet. Is this a problem?

best

Richard

@rioma7

Each page has its own 'slug' which we can use to target it specifically.

You will need some basic knowledge of CSS and we will be adding Custom CSS within 'Lay Options - Custom CSS & HTML:

Screen Shot 2020-09-14 at 2.51.54 PM.png

https://laytheme.com/documentation.html#custom-css-styling

Within this link you will find information on the 'Developer tools' - you will need to right-click & 'inspect' your homepage.

Here i have inspected my home page:
Screen Shot 2020-11-27 at 5.07.02 PM.png

and found in the opening <body> tag a series of classes, One of them is called : slug-work

So in the 'Custom CSS' area at the top of our Custom CSS & HTML page within Lay Theme's Backend i would add code similar to this:

.slug-work .laynav{
    display:none; 
}

You must replace the '.slug-work' with the correct slug of your homepage, keeping the .laynav

I hope this helps, let me know how you go & Good luck! :)

Best
Richard

peti-peti

@Richard-K

Hi Richard, thank you for your profound reply.
If I want to hide the complete navigation on a certain page do I need to address every single class or is there a main class (up to now I couldn't figure it out).
It works already with:

.slug-startseite .laynav{
display:none;
}
.slug-startseite .sitetitle img{
display:none;
}
.slug-startseite .navbar{
display:none;
}

but there must be sth more elegant.

Cheers
Peter

Richard

Dear Peter @peti-peti

Yeah sure :)
You would target the highest parent of the heirachy and all its descendants will inherit that CSS :)

Things like 'site title' and a solid 'navbar' you can turn off in 'Customise' in the Wordpress admin bar (left bar)
You may also have a 'padding-top' that you can change within Laytheme's Options'

So we would target the specific page like you have done:

.slug-startseite

Then i believe you want the highest parent which would be 'laynav' but also on mobile a Burger menu would appear so:

.slug-startseite .laynav, .burger-wrap {
    display:none;
}

Let me know how that goes for you Peter, or if i answered your question correctly and have a wonderful day :)

Best
Richard