[Resolved] How to put a slider in the header

Home Forums Support How to put a slider in the header

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1102742
    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?

    #1102745
    Leo
    Staff
    Customer Support

    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/

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

    #1104109
    David
    Staff
    Customer Support

    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.

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

    #1104259
    David
    Staff
    Customer Support

    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/

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

    #1104315
    David
    Staff
    Customer Support

    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/

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

    #1104325
    David
    Staff
    Customer Support

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

    #1104327
    metcomllc@aol.com

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

    #1104328
    metcomllc@aol.com

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

    #1104342
    David
    Staff
    Customer Support

    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.

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

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

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