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

[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

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

[Tom]

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

[Christina]

Thanks! Got it working.

[bdbrown]

You’re welcome 🙂

[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

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

[Author]

Posts