Archived topic
Image at same height than header
3 replies · Started by Fernando Díaz Gascón on August 27, 2016
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
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;
}Awesome!
Take a look:
http://longhu.es.mialias.net/
user: longhu329
pass: 2ZR25mxE
Looks good! :)
