[Resolved] overlapping elements in header

Home Forums Support overlapping elements in header

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #290788
    dasigna

    hi there,

    little question again for a problem i couldnt solve yet:
    trying to place an element (picture) over the header-logo. screenshot to explain:

    picture

    the green element should be placed o top of the the red element (logo).
    logo currently is set as header-logo, green element as (header) backgroung-image. playing around with the z-index didnt get me to what i am after so far – maybe just didnt found the right selectors yet …?

    any hint how to resolve this appreciated with thanks in advance.

    #290797
    Leo
    Staff
    Customer Support

    Hi there,

    Are you able to provide a link to the site? Thanks!

    #290809
    dasigna

    sorry – only under local development at the moment :-/

    any hint possible anyway?

    #290810
    Leo
    Staff
    Customer Support

    Hmm maybe try adding some padding to the logo?

    .site-logo {
        padding-top: 20px;
    }
    #290855
    Tom
    Lead Developer
    Lead Developer

    Static elements will always sit on top of background images.

    In order to do this, you would need to place the pattern as a static image and set it to position: absolute;

    That will allow it to sit on top of the logo.

    #290868
    dasigna

    yes… already thought of this – but how do i place the pattern as a static element on top of the header??? 🙂

    #290870
    Tom
    Lead Developer
    Lead Developer

    Using z-index once it’s a static image.

    #290915
    dasigna

    … the question for me rather is how to get that pattern as a static image into the header… properly! 🙂
    once it is there, the z-index should not be the problem (hopefully).

    but how do i manage to the this little img thing as static where it should belong???
    tried it via ‘before-header-content’-hook which works in priciple, but the green pattern is only one single ‘tooth’ and i cant get it repeated as an image…

    so tried as well to insert as div via hook and defined pattern as bg in css, but then struggling to get it properly adressed till now (without disturbing the header). and z-index then again is a problem (so far).

    so maybe a better way would be to create the pattern as a complete img (and probably huge width) and insert via hook so i dont have to repeat it?

    or what is the best possible way to achieve the pattern to appear on top of the logo? any examples available maybe?

    any help appreciated once more (or so…). thanks again.

    #291042
    Tom
    Lead Developer
    Lead Developer

    You could possibly create an element and add it as a background to the element:

    <div class="pattern"></div>

    .pattern {
        height: 10px;
        width: 100%;
        background-image: url(URL in here);
        background-repeat: repeat-x;
        position: relative;
        z-index: 100;
    }

    Just a thought – not tested.

    #291145
    dasigna

    …close to what ive tested without luck.
    problem alway was to get the pattern above the logo – z-index had no effect, or header content got messed up – especially when inserting via ‘before-header-content’-hook.

    after some more tweaking found out how it works:

    this <div class="top-overlay"></div> into ‘before-header’-hook

    then this

    .top-overlay {
        width: 100%;
        height: 34px;
        background-image: url("image_url");
        background-position: center;
        background-repeat: repeat-x;
        position: absolute;
        z-index: 999;
      }

    into css.

    at the end the culprits were two things: the right place for the hook and the ‘absolute’ position-value for the overlay.

    everything as expected for now, only have to tweak a bit for the responsiveness.
    so again with a little help from my friends this worked out great.

    thanks guys 🙂

    #291281
    Tom
    Lead Developer
    Lead Developer
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.