- This topic has 13 replies, 4 voices, and was last updated 1 year, 10 months ago by David.
-
AuthorPosts
-
March 30, 2022 at 6:46 pm #2173028Kaiser
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?
March 30, 2022 at 6:49 pm #2173029Fernando Customer SupportHi 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. 🙂
March 30, 2022 at 6:51 pm #2173030KaiserThe site is in internal network. Is there any way I can show you the screen or code?
March 30, 2022 at 6:55 pm #2173031Fernando Customer SupportYou may add a screenshot of your header as such: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots
March 30, 2022 at 7:03 pm #2173039KaiserHere is the screen shot
March 30, 2022 at 7:21 pm #2173047Fernando Customer SupportSeems 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. 🙂
March 30, 2022 at 7:36 pm #2173053KaiserI 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;
}March 30, 2022 at 8:00 pm #2173061Fernando Customer SupportI 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. 🙂
March 30, 2022 at 8:40 pm #2173080KaiserIt works. Thank you very much!
March 30, 2022 at 8:44 pm #2173083Fernando Customer SupportYou’re welcome Kaiser! Glad that worked! Feel free to reach out anytime you’ll need assistance with anything else. 🙂
June 4, 2022 at 2:47 pm #2243648DougYou 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!
-DougJune 5, 2022 at 3:40 am #2243919DavidStaffCustomer SupportHi 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; } }
June 6, 2022 at 7:10 am #2245007DougExactly. Thank you!
June 6, 2022 at 8:39 am #2245238DavidStaffCustomer SupportGlad we could be of help
-
AuthorPosts
- You must be logged in to reply to this topic.