Header and content dissapears when switching to Elementor Full width

What theme are you using?

Is the header part of the theme or a section of Elementor builder?

Thanks for coming back to me so quickly. I am using the Optimizer theme.

The image with the contact text is the header I am creating in Elementor. So basically it’s the header and footer that are built with Optimizer, and the content area is made in Elementor.

When I switch to Elementor full width blank, though, the elementor content is working perfectly (in full width), but of course no header and footer.

No problem.

Let me take a look at the theme and both plugins to see if there’s anything that’s conflicting. Will come back to you as soon as I can.

OK, the problem is two folds – the theme and Elementor have a css conflict.

The following CSS code is the best workaround I can offer for now. You can either add it to a child theme if using one or if not then in a custom css plugin. I recommend using the Simple Custom CSS plugin.

The CSS code you need is…

.header{z-index: 1;}

.elementor-element.elementor-element-orcfxph > .elementor-container {
    clear: both;
}

You might want to post the issue to both the theme’s and Elementor’s forums and cross reference this thread to them.

That worked, thank you! Only for some reason the text elements that are on top the image still aren’t visible. Any clue?

Offtopic question: is it possible to partially design/customize a woocommerce shop page in Elementor, or add some Elementor elements (like a header) at all?

That worked, thank you! Only for some reason the text elements that are on top the image still aren’t visible. Any clue?

Without the actual seeing the page it would be only guess work on part as to what the issue is and may result in a half hearted solution. If you have a link or are able to export and share the template I can take a closer look to see if I can offer you a viable solution.

Offtopic question: is it possible to partially design/customize a woocommerce shop page in Elementor, or add some Elementor elements (like a header) at all?

I’ve not tried doing so directly with WooCommerce product pages or shop page. I do however have a plugin that can help with designing the shop page by utilising native widgets – please take a look at Elementor Addon Widgets to see if it meets your needs.

Please see this page: https://bobkin.nl/wordpress/contact/ (I have taken off the maintenance for a limited time)

https://bobkin.nl/wordpress/art-lending/ <- this page has the same construction, only the page is set to full width

Thanks for the Addon widgets tip!

Thank you for the links – they were of help in finding the right element to target. Please try this code i.e replace the second part of the original code with this one:

.elementor-element.elementor-element-pcdajpv > .elementor-container {
    clear: both;
}

Thanks for the Addon widgets tip!

You are most welcome.

Thanks a bunch, again!

Last question: as this workaround particularly applies for the contact page, how do I fix the problem for other, future pages as well? Or how do I find out the specific element tag?

No problem ??

how do I find out the specific element tag?

The easy way is to use “Inspect” in Chrome or “Inspect Element” in Firefox.

You basically locate the section/area you want to work, right click on and chose to inspect – you then work thorugh the elements while viewing their corresponding CSS on the right. Play with the CSS to see which values suite your needs then simply copy those to your stylesheet/css plugin.

The hard way is to dig in to the source files and study the relevant elements and then manipulate those!