[Resolved] align logo and slider horizontally in header

Home Forums Support align logo and slider horizontally in header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #929707
    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

    #929751
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #929860
    Steen

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

    #930017
    David
    Staff
    Customer Support

    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.

    #930267
    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.

    #930622
    David
    Staff
    Customer Support

    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.

    #930863
    Steen

    Hmmm. they are both 400px high. I’ll figure it out by trail and error πŸ™‚

    #931136
    David
    Staff
    Customer Support

    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.

    #931603
    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 ?

    #931650
    Leo
    Staff
    Customer Support

    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?

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.