[Support request] Main menu position fixed

[ppmd]

Hi everyone,

I’d like the main menu to go above the page content ( in this case i want thant overlaps on the green background).

I can’t find a css combination to make sure that the menu, when I’m at the beginning of the site and only in that case, it goes above the green background (or in general above the page content), with its content centered and on a white background.

I’ve tried with the following code but I can’t seem to keep it centered on a white background and the logo goes to the other.

.inside-header {
position:fixed;
z-index: 1111111;
display: block;
overflow: hidden;
margin: 0px auto}

[Ying]

Hi there,

Do you want something like this?
https://www.screencast.com/t/NIIm6Pz5b

If so, you can create a header element at appearance > elements, then choose merge option.

Here’s a tutorial video: https://youtube.com/watch?v=TP8mgBQTgGg&si=EnSIkaIECMiOmarE

let me know if I miss anything.

[ppmd]

That’s work! Thanks! 🙂

one more question: I would like #secondary-navigationwas sticky like the main menu when scrolling…could you help me?

The following code doesn’t work

#secondary-navigation {
     width: 100% ;
     position: fixed;
}

By inserting this code seems there is two main menus, because the “version” of the main menu during the scrolling overlaps the “version” of same main menu at the beginning of the site.
I don’t understand what’s going on : i insert an ID which has nothing to do with the main menu 😨

[Fernando]

Hello there,

When not scrolling, where are you placing the logo? The sticky nav you have is different from your normal menu. Is this how you want it to be?

If so, we’ll need to resize the normal menu’s height so that making the secondary nav sticky on scroll becomes more cohesive.

[ppmd]

yes, I confirm that the sticky menu and the one at the top of the site will have different dimensions:
at the beginning of the site, without scrolling, the main menu is smaller and centered (the logo will be on the left where now there is only the site name), while the sticky one stretches to the full size of the window.

But I don’t understand what you mean by resizing the normal menu…

[Fernando]

Sorry, I think I was viewing a cached version of your site awhile ago. Please disregard my previous response.

Can you try adding this through Appearance > Customize > Additional CSS?:

nav#secondary-navigation {
    position: fixed;
    width: 100%;
    top: 0;
}

nav#sticky-navigation.is_stuck {
    top:  40px !important;
}

header#masthead {
    margin-top: 40px;
}

[ppmd]

perfect, that’s work!
thank u very much Fernando

i only added at your code

.is_stuck {margin-top:0px !important;}

because the scrolling nav had a 12px of margin-top

[Fernando]

You’re welcome!

[ppmd]

Hi, the problem was solved, but when I changed the homepage (before there was another page as home) the menu at the top of the site no longer goes above the page content.

I can’t figure out why, in elements, the header is set to go above the content all over the site.

Can you help me?

[David]

Hi there,

when you’re creating those kinds of layouts with a page builder you should set the themes Content Container to Full Width. See here:

https://docs.generatepress.com/article/content-container/

That will remove its padding and marigins

It also means you don’t need to get the Pagebuilder to force full width rows…

[ppmd]

Thanks david,
there is no alternative way to keep the layout as it is, so with padding and margin, and make the menu look like this at the beginning of the site https://www.screencast.com/t/NIIm6Pz5b

[David]

Why do you want to keep the Themes padding when the homepage is built with a pagebuilder ?

[ppmd]

If I set the theme layout to “Full Width”, I have seen that even the rows set to “default” of page builder lose their padding, and the content gets wider across the board, which I don’t want

I would only need to intervene on the menu and not on all the content.

[David]

Try adding this CSS:

.home.separate-containers .site-main,
.home.separate-containers .inside-article, 
.home .entry-content {
    margin-top: 0;
    padding-top: 0;
}

Then in the page editor disable elements, disable the content title:

https://docs.generatepress.com/article/disable-elements-overview/

But personally i would use the method i suggested above, then in the pagebuilder add the missing padding, and stop using the force full width option. The method that pagebuilder users to force the rows to be full width uses Javascript – and this is what it does when i refresh the page:

See it loads originally the width of the GP Container. And then javascript forces it to be full width.

[ppmd]

For now I will use the css, thanks

I would like to be able to use the method you suggest, but as I said above, when I set the page builder row to default, it is still inserted at full width, which in reality shouldn’t happen. so i should put a lot of padding/margin and then fix the media queries.

if there was a way to avoid this I would proceed as you suggested.

[Author]

Posts