Site logo

Archived topic

How to put a slider in the header

19 replies · Started by Forum User on December 12, 2019

Viewing posts 1–15 of 20

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?

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

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?

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

This archived topic is closed to new replies.