[Resolved] Cannot position header widget on right side

[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?

[Fernando]

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

[Kaiser]

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

[Fernando]

You may add a screenshot of your header as such: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Kaiser]

Here is the screen shot

[Fernando]

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

[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;
}

[Fernando]

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

[Kaiser]

It works. Thank you very much!

[Fernando]

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

[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

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Doug]

Exactly. Thank you!

[David]

Glad we could be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts