[Resolved] Image at same height than header

[Fernando Díaz Gascón]

Hello,

I want to do something nice with a site using GP, but I have no idea and I dont know if it is possible.

http://longhu.es.mialias.net/
user: longhu329
pass: 2ZR25mxE

– I wanted to put the main menu under an image. I made it with GP Hooks, using the “After Header Content” to put the image.
– The issue is that the image has got two images standing out at top (the dragon icon) and at bottom (the red and white symbol).
– I would like to have those images at the same height than the header and the menu (or at least at the header, maybe cut the menu is going to be very complicated, I dont know).

Something like this: http://longhu.es.mialias.net/wp-content/uploads/2016/08/index01.gif

Do you find some solution?

Thanks in advance

[Tom]

Hi there,

I can’t get you all the way there, but I can get you partially there.

First, change your HTML to this (no surrounding div, no link):

<img class="aligncenter size-full wp-image-270 featured-header-image" src="http://longhu.es.mialias.net/wp-content/uploads/2016/08/Imagen-portada-recortada.jpg" alt="Imagen-portada-recortada" width="1920" height="932">

Then add this CSS:

.featured-header-image {
    position: relative;
    top: -100px;
    z-index: 1;
    margin-bottom: -100px;
}

.secondary-navigation, .site-branding {
    position: relative;
    z-index: 2;
}

[Fernando Díaz Gascón]

Awesome!

Take a look:
http://longhu.es.mialias.net/
user: longhu329
pass: 2ZR25mxE

[Tom]

Looks good! 🙂

[Author]

Posts