Archived topic
How to put a slider in the header
19 replies · Started by Forum User on December 12, 2019
Is it passible to have an image in the header on the the left and a slider (meta slider) in the header on the right?
Hi there,
Your currently logo image is very wide so I don't think you'd have room for a slider.
If you want to try then the header widget should be what you are looking for:
https://docs.generatepress.com/article/header-widget/
I am a little confused. Would you mind giving me step by step instructions?
I am trying to accomplish 2 things. If possible, left align my desktop header and put a meta slider in the right corner.
Is it possible to put a "2nd header" below the primary navigation? So that I have my current header above the primary navigation and there is a 2nd header below the primary navigation.
Hi there,
what is going in the Meta Slider ? eg. Just Images or Images and Text?
Either way will be a pain to get right and make it responsive.
Meta slider will have images and text. I believe I can have a different mobile header.
I am trying to accomplish 2 things. If possible, left align my desktop header and put a meta slider in the right corner.
Is it possible to put a “2nd header” below the primary navigation? So that I have my current header above the primary navigation and there is a 2nd header below the primary navigation.
1. First you need to change Header Width and Inner Header Width in the Customizer > Layout > Header to full width. You can then add you Meta Slider shortcode to the Header Widget which will occupy 50% of the header.
2. You can use a Header Element to add other content immediately below the site header / navigation:
https://docs.generatepress.com/article/header-element-overview/
Please give me step by step instructions on how to add a meta slider in the top right of the header (I assume using an element?).https://miamihypnosiscenter.org
I already changed the Header Width and Inner Header to full width.
I already added this to the CSS
.header-widget {
float: right;
max-width: 50%;
}
Please give me step by step instructions on how to add an full width image below the primary navigation (with a header in place above the primary navigation).
1. Customizer > Widgets > Header Widget - add a HTML Widget and paste in your meta slider shortcode.
2. This article i provided which also includes a video explains how to set up a Header Element:
https://docs.generatepress.com/article/header-element-overview/
So I added the meta slider but it is above the header as opposed to being on the right of the header.
Can you add it back in so i can see what the issue is?
The meta slider is above the header now. Is that what you mean?
The meta slider is above the header now. Is that what you mean?
https://miamihypnosiscenter.org
Add this CSS:
.site-logo {
max-width: calc(100% - 255px);
}
The 255px is roughly the size of the meta slider so would need to be adjusted if this was changed.
But you will see what i mean by the responsive issues when resizing the browser, as its impossible to maintain equal heights of the header and the slider.
That worked. Thanks. https://miamihypnosiscenter.org
1) Is there a way to put custom content into the mobile version of my site? I already have a custom header set up for the mobile site.
2) You can use a Header Element to add other content immediately below the site header / navigation: https://docs.generatepress.com/article/header-element-overview/
Please give me step by step instructions on how to add a full width image below the primary navigation (keeping my current header above the primary navigation).
I see the responsive issue now. So I had to remove it. I was hoping the mobile header would remain unchanged.
You can use a Header Element to add other content immediately below the site header / navigation: https://docs.generatepress.com/article/header-element-overview/
Please give me step by step instructions on how to add a full width image below the primary navigation (keeping my current header above the primary navigation).