Archived topic
SLider as header with Title floating on top like a layre
6 replies · Started by Christina on October 6, 2015
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
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.
That's AWESOME @bdbrown, thanks for taking the time to write all of that!
Thanks! Got it working.
You're welcome :)
Hi, interesting issue and nice website @bdbrown
but how do you get the title and subtitle in de floating Title?
best regards,
Daniëlle
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/