Can the header "bleed" behind the LayerSlider image?

[dannikb]

I have a design that I’m trying to create where the background behind the menu is an odd shape. It looks like this:

The image beneath the menu area will be in LayerSlider.

I’ve almost managed to create it, though I don’t know if I’m going about it the right way, and it’s not quite where I need it to be. Here’s what it looks like on my dev site:

I’ve accomplished it by putting an image of the odd-shaped pink area in the container behind the menu. (And I’ll use a different image on mobile that is much smaller and contains a hamburger menu icon). But, as you can see, I can’t get the pink to bleed below the header and under the LayerSlider image.

Can you help, please?

[rad]

Hi Danette,

Thanks for reaching out.

It doesn’t need to bleed, you can add a background color of the same pink to where the image is and it will look like it’s connected to upper menu. For example, you can add this CSS to Theme Options > CSS

    #layerslider_1, #layerslider_1 .ls-inner {
     background: #b93c70 !important;   
    }

This is more on artistic customization which may get complex if combined with responsive styling. I recommend contacting a web designer/developer for implementation.

Thanks!