Expand Mobile Header Background Image for Mobile Menu

[ajonesx]

Hi Xters,

One of the defaults for the old Integrity Stack in the X theme options was that the mobile header background image would seamlessly expand into the mobile menu b.g. when the hamburger was clicked (very cool!) This expanded header b.g. completely covered the underlying mobile website and the menu items were scrollable.

I’m using the header builder in Pro now and am wondering if this effect can be duplicated. The menu toggle element that I’ve added to the header only seems to be bringing up a separately overlaid background.

Yes, I could add the same image to this separate overlay and position it, but it’s not the same thing as having it organically expand outward from the mobile header image itself. Hope you can help… Thanks!

[prakash_s]

Hello @ajonesx,

Thanks for writing to us.

Regretfully there is no option at the moment but you can achieve it by using custom CSS code you need to go to the Header Builder —>Navigation Dropdown —>Customize —>Element CSS.

$el.x-dropdown{background-image:url(image_URL); background-size: cover; }

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks