Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Image at same height than header

Home Forums Support [Resolved] Image at same height than header

Home Forums Support Image at same height than header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #221607
    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

    #221695
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #222480
    Fernando Díaz Gascón

    Awesome!

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

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