[Resolved] align logo and slider horizontally in header

[Steen]

Is it possible to align logo and slider horizontally in header ?
I added at smart slider via elements
set the container for content and images in the slider to 1360px w and 400px h
The logo is 450px w and 400px h

I want the logo plus the slider to be 1360px w and 400px h in total.

I tried to use images 910px w and 400px h plus the logo 450px and 400px h, but I cant figure it out.

I’ll be thankful of any help

[Leo]

Hi there,

Try adding the slider using a header widget:
https://docs.generatepress.com/article/header-widget/

Then we can provide some CSS to tweak it.

Let me know 🙂

[Steen]

Thx for fast reply.
I’ve deleted the slider in elements and added the slider in a header widget

[David]

Hi there.

try adding this CSS:

.header-widget {
    max-width: 100% !important;
    width: 100%;
    display: flex;
}
.header-widget .widget_smartslider3 {
    flex: 1;
}

You may want to add some white space to the right hand side of your image logo. If i add margin or padding to open up the image it will resize it.

[Steen]

we are almost there 🙂
I would prefer the bottom margin to be the same as the right margin, which is 20px.
How can I do this ?
Right now there is no bottom margin within the image.

[David]

The issue is the logo is not tall enough to the fill the height that slider is setting. So you would need to adjust the logo height or reduce the height of the slider.

[Steen]

Hmmm. they are both 400px high. I’ll figure it out by trail and error 🙂

[David]

The tricky part of this is:

a. the slider is being displayed at a fixed ratio so it will always be displayed in full view.
b. the image will resize to fit whatever space the slider leaves in the header.

You can see this if you reduce your browser size the the image will shrink. So we may have to look at an alternative method for doing this.

[Steen]

Hmmm, I see what you mean.
The only alternative I can think of, is to have the logo within the image of the slider. Which is not what I really want.
The reason of this being the hazel of changing the images will be more complicated for the customer. Instead of just changing the images in the slider, they’ll have to attach the logo to each image and then add it to the slider.
Do you have any suggestions to solve the challenge ?

[Leo]

I would say that adding the logo in is the way to go.

Or maybe find an example of the effect you are trying to achieve and we can take a look to see how it was done?

[Author]

Posts