Header Element Layer

Hi there,

You can try this CSS:

.page-hero picture {
    left: 0;
    top: 0;
    position: absolute;
}

.page-hero {
    position: relative;
}

But if you want it to be added right beside the navigation then you should hook it in through generate_inside_navigation for desktop and generate_inside_mobile_header for mobile header. And then let us check the site if it messes up the layout alignment. :D

Hey Elvin,

That is pretty good thanks, but I would prefer to have the 'V' slightly off the page, like it is on the Home Page? I tried the left and top settings but they didn't do it?
Thanks

negative percentage values for left should work.

Example:

.page-hero picture {
    left: -8%;
    top: 0;
    position: absolute;
}

Result - https://share.getcloudapp.com/nOu5EJ98

Perfect. I was missing the %
Thanks

No problem. :D

So sorry. Just quickly, is there something I can add to make this image responsive?

So sorry. Just quickly, is there something I can add to make this image responsive?

Any specific way you want it to be responsive? Is it for positioning or resize?

Let us know.

Resize

Try this CSS:

@media (max-width:768px){
    .page-hero picture > * {
        width: 200px;
        height: auto;
    }
}

Adjust width value to your preference. :D

Added CSS to Customiser but nothing happened?

It's for mobile. It should resize the "V" image as shown here - https://share.getcloudapp.com/12uPBgqB

Hey Elvin,
Thanks, that is cool. I added another level of CSS to that too , which now makes the image shrink to 600px when viewed in a smaller browser window.

	@media (max-width:1400px){
    .page-hero picture > * {
        width: 600px;
        height: auto;
    }
}

Would this be the correct approach?
Thanks

Yes that's correct.

Although you may have to text the actual viewport size you've added.

By default, here are the viewports media rules the theme uses:

For mobile = @media (max-width:768px)
For tablets and smaller desktops = @media (min-width:769px) and (max-width:1024px)
For large desktops = @media (min-width:1025px)

And if you want to be more precise with mobile, you can add more media rules for the smaller ones.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/