[Resolved] Header Element Layer

Home Forums Support [Resolved] Header Element Layer

Home Forums Support Header Element Layer

  • This topic has 13 replies, 2 voices, and was last updated 2 weeks ago by Elvin.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1959477
    troyw

    Hi team,

    I need to place an image on the Top Left of a Header Element, but can’t seem to figure out how.
    As you will see on my Homepage Slider, there is a semi-transparent ‘V’ image. I want to add this to my Header Elements as well, in a similar position.
    If you go to the link below, you will see that I have added the image (in center), but can’t work out how to position it in the top left?

    Thanks

    #1959527
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1960399
    troyw

    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

    #1960691
    Elvin
    Staff
    Customer Support

    negative percentage values for left should work.

    Example:

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

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

    A wise man once said:
    "Have you cleared your cache?"

    #1961572
    troyw

    Perfect. I was missing the %
    Thanks

    #1961574
    Elvin
    Staff
    Customer Support

    No problem. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1961578
    troyw

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

    #1961603
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1961670
    troyw

    Resize

    #1961678
    Elvin
    Staff
    Customer Support

    Try this CSS:

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

    Adjust width value to your preference. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1961680
    troyw

    Added CSS to Customiser but nothing happened?

    #1961692
    Elvin
    Staff
    Customer Support

    It’s for mobile. It should resize the “V” image as shown here – https://share.getcloudapp.com/12uPBgqB

    A wise man once said:
    "Have you cleared your cache?"

    #1962711
    troyw

    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

    #1962794
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.