[Resolved] Cannot position header widget on right side

Home Forums Support [Resolved] Cannot position header widget on right side

Home Forums Support Cannot position header widget on right side

  • This topic has 13 replies, 4 voices, and was last updated 2 months ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2173028
    Kaiser

    I added a widget on the header but it shows in center under the logo instead of right side. How can I move the widget to the right?

    #2173029
    Fernando
    Customer Support

    Hi Kaiser,

    To have a better understanding of the issue, may you provide the link to the site in question?

    You may use the private information field if your prefer: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Hope to hear from you soon. 🙂

    #2173030
    Kaiser

    The site is in internal network. Is there any way I can show you the screen or code?

    #2173031
    Fernando
    Customer Support
    #2173039
    Kaiser

    Here is the screen shot

    #2173047
    Fernando
    Customer Support

    Seems like your header is built with some CSS. Without seeing the HTML structure and the CSS code, solving this issue may be a hit or miss.

    Can you try providing the HTML structure of your Header as such?: https://share.getcloudapp.com/z8uL6rpg

    Paste it here and place in in a Code Block: https://share.getcloudapp.com/z8uL6rJg

    Hope to hear from you soon. 🙂

    #2173053
    Kaiser

    I only upload a background picture and a logo image. Then the following additional css (I have tried to remove all css but the widget still in the center):


    @media
    (min-width: 1081px) {
    .site-header
    .header-image {
    padding-bottom:10px;
    height:70px;
    width:400px;
    }

    .site-header {
    height:70px;
    }
    .main-title {
    text-shadow: 0px 0px 3px #000;
    text-indent: 10%;
    }

    .site-logo {
    padding-left: 10px;
    }
    }


    @media
    (max-width: 1080px) {

    .site-header
    .header-image {
    height:45px;
    }

    .site-header {
    height:120px;
    }
    .main-title {
    text-shadow: 0px 0px 3px #000;
    }
    }

    .inside-header {
    padding: 10px;
    }

    .header-widget-right {
    text-align:left;
    text-shadow: 0px 0px 3px #000;
    color: #fff;
    padding-right: 50px;
    padding-top: 15px;
    }

    #2173061
    Fernando
    Customer Support

    I see.

    Can you try adding this CSS in Appearance > Customize > Additional CSS:

    .site-header > .inside-header.grid-container {
        position: relative;
    }
    
    .header-widget {
        position: absolute;
        right: 0;
        padding-right: 10px;
    }

    If it works, kindly replace 10px to your preferred right padding value.

    Kindly let us know how it goes. 🙂

    #2173080
    Kaiser

    It works. Thank you very much!

    #2173083
    Fernando
    Customer Support

    You’re welcome Kaiser! Glad that worked! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

    #2243648
    Doug

    You guys have the best support feedback. Your CSS works brilliantly expect on mobile. It would be helpful to have the widget center under logo on mobile.
    my site: https://a1welding2022.wpengine.com/

    I’ve tried a couple variation with @media– so thanks for any insights!
    -Doug

    #2243919
    David
    Staff
    Customer Support

    Hi there,

    change this CSS:

    .header-widget {
        position: absolute;
        right: 0;
        padding-right: 20px;
    }

    to:

    @media(min-width: 1024px) {
        .header-widget {
            position: absolute;
            right: 0;
            padding-right: 20px;
        }
    }
    #2245007
    Doug

    Exactly. Thank you!

    #2245238
    David
    Staff
    Customer Support

    Glad we could be of help

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