Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] SLider as header with Title floating on top like a layre

Home Forums Support SLider as header with Title floating on top like a layre

  • This topic has 6 replies, 4 voices, and was last updated 5 years ago by bdbrown.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #142325
    Christina

    Hi, I’m using Generate Press premium and would like to replace the header image with a slider. I can manage this, but the header title and site description pop up above it. I would like a way to have them float above the images like another layer. How can I do this.
    Christina ALbig at http://anitafactor.com/
    thank you

    #142368
    bdbrown

    Hi Christina. I did some testing using Metaslider with the shortcode in the “Before Header Content” hook, and the following custom css:

    .site-branding {
      position: absolute;
      top: 20%;
      left: 20%;
      width: 40%;
    }
    
    .main-title {
      text-align: center;
      font-size: 250%;
      background-color: #fff;
      opacity: .8;
    }
    
    .site-description{
      text-align: center;
      font-size: 150%;
      background-color: #fff;
      opacity: .9;
    }
    
    /* Portrait tablet and below */
    @media (max-width: 961px) {
      .site-branding {
        left: 10% !important;
        width: 75% !important;
      }
      .main-title {
        font-size: 150% !important;
      }
      .site-description{
        font-size: 125% !important;
      }
    }
    

    I’m sure it will need some tweaking for your particular site but will hopefully give you a good starting point.

    #142386
    Tom
    Lead Developer
    Lead Developer

    That’s AWESOME @bdbrown, thanks for taking the time to write all of that!

    #142404
    Christina

    Thanks! Got it working.

    #142407
    bdbrown

    You’re welcome 🙂

    #152960
    Daniëlle

    Hi, interesting issue and nice website @bdbrown
    but how do you get the title and subtitle in de floating Title?

    best regards,

    Daniëlle

    #153128
    bdbrown

    Hi @Daniëlle – the Metaslider shortcode is in the “Before Header Content” hook. That hook is a part of the GP Hooks add-on (https://generatepress.com/downloads/generate-hooks/) and is also included in the GP Premium add-on (https://generatepress.com/gp-premium/). The CSS does the styling and positioning. Does that help?

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.