Main menu position fixed – GeneratePress

This topic has 15 replies, 4 voices, and was last updated 3 years, 2 months ago by David.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
February 20, 2023 at 2:00 pm #2540427

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}

February 20, 2023 at 5:30 pm #2540562

Ying
Staff
Customer Support

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.

February 21, 2023 at 4:10 pm #2541859
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 😨
February 21, 2023 at 6:26 pm #2541955

Fernando
Customer Support

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.

February 22, 2023 at 2:37 am #2542310

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…

February 22, 2023 at 2:46 am #2542324
Fernando
Customer Support
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;
}
```
February 22, 2023 at 3:48 am #2542380

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

February 22, 2023 at 5:41 pm #2543365

Fernando
Customer Support

You’re welcome!

March 3, 2023 at 2:57 am #2553792

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?

March 3, 2023 at 5:39 am #2553983

David
Staff
Customer Support

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…

March 3, 2023 at 6:34 am #2554029

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

March 3, 2023 at 7:18 am #2554073

David
Staff
Customer Support

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

March 3, 2023 at 8:30 am #2554314

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.

March 4, 2023 at 5:13 am #2555167
David
Staff
Customer Support
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.
March 6, 2023 at 1:32 am #2557064

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