[Resolved] How to put a slider in the header

[metcomllc@aol.com]

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?

[Leo]

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/

[metcomllc@aol.com]

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.

[David]

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.

[metcomllc@aol.com]

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.

[David]

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/

[metcomllc@aol.com]

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

[David]

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/

[metcomllc@aol.com]

So I added the meta slider but it is above the header as opposed to being on the right of the header.

[David]

Can you add it back in so i can see what the issue is?

[metcomllc@aol.com]

The meta slider is above the header now. Is that what you mean?

[metcomllc@aol.com]

The meta slider is above the header now. Is that what you mean?
https://miamihypnosiscenter.org

[David]

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.

[metcomllc@aol.com]

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

[metcomllc@aol.com]

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

[Author]

Posts