Replace Fusion Slider with Full Width Container

[Jetxpert-Envato]

#622618

Good Day!

Does anyone know how to create a full-width container (containing a header, text, and button) that can replace the Fusion Slider (also containing a header, text, and button)?

We attempted it, but we couldn’t get the container’s upper edge (with a background image) to butt against the bottom edge of our menu nor could we get the container to display in the “page view” only. The background image went past the bottom edge of our desktop browser screen.

Oh well, giving it a shot. I believe @shaminder (from Avada Support) assisted with this a while ago, but lost his instructions.

Any help or input you can provide would be great. Heck, if you have a page URL that can be used as a template, we’ll take it!

Cheers!

[marklchaves]

#622850

Hi @jetxpert-envato,

First question. I’ve done this with some of my newer clients who needed a minimal design. Instead of using a Fusion Slider for the hero banner image, I use the Page Title Bar under the Fusion options for the page. Have you tried this before trying to replace the slider with a full-width container?

Here’s an example of what I’m talking about.

https://soultherapist.co/blog/

The reason I’m suggesting this is because the Page Title Bar does the heavy lifting for you and it’s faster than a Fusion slider.

Secondly, without seeing your code, there can be many reasons why you have a gap between your background image and menu. I would definitely use your dev tools inspector. If you haven’t already checked

1. See if there are any margins being set anywhere. You might need to dabble with a negative margin to pull your background image to the top. More on negative margins here. https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/
2. See if you see any div components stacked on top of each other, they might be the culprits creating the unwanted space. Negative margins can fix this too. Here’s an example on CodePen. https://codepen.io/marklchaves/pen/GbZVxp

I hope this helps.

[Jetxpert-Envato]

#623138

@mark,

Thanks for the suggestion. Time permitting, we’ll give it a try. However, original inquiry still remains open.

If you know of a procedure to do this, please share!

Cheers!

[dresshime Last_name]

#887133

Hello, please help.
I don’t have page title bar, instead I use a “container” to create a title bar, there are margins on the top. how do I apply negative top margins?

I’m using Avada builder. Here’s the page’s link: https://chinaglobalfreight.com/integrated-logistics/

Please tell me how to achieve a non-top-margin page title bar using a container.
Thank you very much!!!

[Ammar. S]

#887155

Hello @dressimeLast_name

You have a valid support, please open a support ticket and our team will assist you further regarding this issue.

Click Here to Get Avada Support

Thanks

-Ammar

[Author]

Posts