[Resolved] overlapping elements in header

[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.

[Leo]

Hi there,

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

[dasigna]

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

any hint possible anyway?

[Leo]

Hmm maybe try adding some padding to the logo?

.site-logo {
    padding-top: 20px;
}

[Tom]

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.

[dasigna]

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

[Tom]

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

[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.

[Tom]

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.

[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 🙂

[Tom]

Glad you got it working! 🙂

[Author]

Posts