[Resolved] layout issue with elementor

[Deborah]

Hello,

This is something that happened before, but it does not seem to happen on all the pages.
The page template is set to Elementor Full Width, the GP options are “full width” and “disable header” (because I want to completely blank page except for the footer)

So far so good, except I am getting a weird empty space strip on the right of left of the screen (see how the footer isn’t full-widht?)

Any help appreciated!

[Leo]

Hi there,

Looks like you have this CSS added:

@media (min-width: 769px)
body {
    margin-left: 200px;
}

[Deborah]

Mhh that’s odd. Where would that be added? I did not add this CSS myself. It must be a theme or elementor thing?
It looks as if GP is giving room for the header (I am using the left vertical navigator header) but because I am asking it to be a blank page it “hides” the header without deleting the placehoder for it

[Leo]

It’s not a theme thing. Should be in WP Custom CSS.

Here is the full block of CSS under the comment fixed header:

/* ------
Fixed Header
------- */

@media (min-width: 769px) {
	body {
		margin-left: 200px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 200px;
		z-index: 300;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;
	}
}

[Deborah]

Hi Leo,

It is indeed in the customizer Additional CSS field.
I did not add this css myself and it got imported when I installed the navigator layout (left menu nav).
The code is clearly added under

/* GeneratePress Site CSS */
/* ——

I am not feeling right about getting rid of it as I think it would affect the other pages where I use the header (left side menu bar)

[David]

Hi Deborah, this is a recurrence of this topic,

https://generatepress.com/forums/topic/generatepress-vertical-menu-elementor-layout/#post-581528

We just need to isolate which pages you don’t want the side bar element added and we can add them to the CSS. Is it all memeberpress pages?

David

[Deborah]

Hi again David!

Thanks for helping. Yes, it absolutely is a recurrence, so thanks for thinking of offering a way to solve the issue moving forward.
The problem is, I am not exactly sure what pages it will be as I am working it out as I build the site.
Is there a way to add the code and then each time I come across a page for which I don’t want to have the navigation I can add in the page id to the code?

[David]

Hi Deborah,

the easiest solution would be to add Tom’s Simple CSS plugin.

https://en-gb.wordpress.org/plugins/simple-css/

This provides a Simple CSS meta box in the page editor. Then you would just need to add this CSS to each of the pages you want to remove it from:

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

[Deborah]

Sounds great David, I’ll do that 🙂 Many thanks again!

[Deborah]

For those using Elementor, the plugin actually offers a CSS custom section for each individual page, so no need for the plugin. Marking this as solved!

[David]

You’re welcome Deborah.

[Author]

Posts