[Resolved] home page menu in toggled state, how to

[Robin]

In the category of “now what?”

I’ve set the navigation up so that it’s always in mobile mode, and you helped me style it.

Now, I’d like for the home page to have the menu in its toggled state (without being able to be un-toggled), and every other page will just be as it is: click to toggle the menu on/off.

Is that possible?

[David]

Hi there,

change this CSS:

#site-navigation.toggled .main-nav>ul {
    max-width: 200px;
    margin-left: auto;
    background: transparent;
    padding-top: 2%;
}

to:

#site-navigation .main-nav>ul {
    max-width: 200px;
    margin-left: auto;
    background: transparent;
    padding-top: 2%;
}

then add this CSS:

.home .main-navigation ul {
    display: block;
}
.home .main-navigation.has-branding .menu-toggle {
    pointer-events: none;
}

[Robin]

thank you!

[David]

You’re welcome

[Robin]

One last detail: if someone (for whatever reason) makes their browser window shorter, the word “MAIDEN” disappears behind the menu.

I know we have set the background to transparent, so… ?

[Robin]

I did try adding “background: transparent” to the css you provided, also to #primary-menu, and everything else I thought might apply.

Tried z-index.

“MAIDEN” still disappears under the menu

[David]

You will need to create a Header Element:

https://docs.generatepress.com/article/header-element-overview/

DO Not add any hero content – just skip to the Site header tab and select Merge with content.

[Robin]

When I make a header element, put in a comment for content, go to header, merge with content, the navigation menu and logo disappear.

What am I missing?

Thank you!

[David]

Don’t add anything to the Hero content. Just set the Site header to merge with content.
Then make sure all the navigation colors in that same tab are set to transparent.

[Robin]

here’s what I’ve done for the header element

logo and menu still disappear

(I can see where the transparent menu will be a problem on interior pages, and I will bring that up with my friend today… Assuming I can control the size of the menu overlay?)

. . .

I don’t know where I’ve gone wrong…

[Robin]

any ideas as to why my header element doesn’t work for what I want?

[Tom]

Is this happening on a specific page? I’m not able to see the issue.

[Robin]

I have stopped using the header element because I couldn’t get it to work

[Tom]

No problem – let us know if you’re still having trouble accomplishing what you’re after 🙂

[Author]

Posts