[Resolved] GeneratePress Vertical Menu + Elementor Layout

[Deborah]

Hello,

I am new to GP and to Elementor so I apologize if this is a baby question but here we go:

I am trying to have a layout with vertical menu on the right (I managed to do that with GP) while the rest of the page (left side) is managed by elementor.

So far it looks like elementor doesn’t ‘see’ the menu on the right and the content is too stretched out: https://www.hq.tizzit.co/library/

Do you know what page attributes and page layout (GP or Elementor settings) would work best to achieve what I want?
See: https://snag.gy/fZKPsU.jpg
Or am I missing something else altogether?

—– Lastly, is there any way to have the full width of the vertical menu colored without using CSS or is CSS the only option?

Many thanks,
Deb

[David]

Hi Deborah, welcome aboard =)

I see you have used either Sider or Navigator site for the install.
So the left hand full height side bar is actually the GP Page Header and you can change the color in Customiser > Color > Header.

Now to the right all i can see is the GP Entry header and an Elementor made footer. So do you have a right sidebar activated?

[Deborah]

Hi David,

Thanks for the prompt reply.
I have used Sider for the install but didn’t upload the content, just the layout.

I do not have a right sidebar because I don’t want one. I just one the header/vertical nav, then elementor content to its left.

The problem is that the elementor content (at the moment there is none but you can see what I mean with the elementor footer) is either too stretched and goes beyond and behind the GP header/vertical menu OR too boxed in (meaning there’s a gap between the GP header/vertical menu and the footer)

[David]

So something like this:

https://gpsites.co/navigator/page-builder/

[Deborah]

Absolutely. Should I install Navigator instead?

[Deborah]

I did hehe.
It’s much better in regards to the footer, but the sections still won’t stretch. See: https://www.hq.tizzit.co/library/
If I force stretch using JS in Elementor it overstretches and goes beyond and behind the vertical menu.

[David]

Hi Deborah, don’t use the stretch option. Go into the WP page editor (not elementor) and look for the Layout Meta box and select Page Builder Container, set this to full width.

[Deborah]

Beautiful!
I knew it was one of those secret settings 😉 That’s great, thank you!

Very last question: The homepage is set to Elementor Canvas so that no header/footer or anything gets in the way of the layout, but since I have installed Sider and then Navigator, the content is pushed to the left/off center.
Take a look here: https://www.hq.tizzit.co/

it’s like the vertical menu is there, but hidden?

[David]

Hi Deborah,

The Elementor Canvas removes all of the GP Theme elements including the GP Header (which in this case is displayed like a sidebar). Instead use the Layout Meta like you did with the pagebuilder container and from their you can disable the elements you don’t need as well as set the number of footer widgets.
Also things like Footer widgets can be set to zero in the customiser and this will remove them globally from the site.

[Deborah]

OK, great. Good to know about that disable elements option.

I have disabled all elements on the page though and the problem persists.
The meta layout -> page builder container is set to full width. I have tried default as well.

[David]

So template is set to default. Which elements did you disable? You shouldn’t disable the Header or Primary navigation or thats goodbye to the sidebar

[Deborah]

I actually don’t want the sidebar on this specific page. I am looking to get rid of this weird empty orange space: https://snag.gy/mg9CBK.jpg

[David]

Aah ok i see (needed more coffee lol).
Ok that is going to need some CSS. If you add this to the additional CSS in the customiser (paste it above the code already there) then it should remove that margin on the Home page:

@media (min-width: 769px) {
    .home {
        margin-left: 0 !important;
    }
}

[Deborah]

Hi David,

That’s ok – it’s close to bedtime for me so I think we’re both doing good considering.
The code above seems to have syntax errors (unexpected body)

[David]

Hi Deborah – one of those day’s… i edited the code above, give that a try…..

[Author]

Posts