Support » Fixing WordPress » Header widgets unaligned with header
Header widgets unaligned with header
-
Total noob. I can try to provide any backend or coding info as needed.
I currently have 3 widgets in the “Header Right”, and in the customizing editor, one is Google translate as “text” and 2 as custom HTML. I have 2 main issues:
1. The 2 custom HTML widgets are messed up:
a. They are much lower than the translate option;
b. The “COVID-19 Resources” widget does not have a margin or border between it and the navigation.
c. Due to the above 2 issues, the 2 widgets, translate option, and logo are no longer aligned.2. I need to add a 3rd widget, “Safe Exit” which takes a user back to google’s homepage.
How do I fix these issues to create a pretty, aligned header?
-
This topic was modified 1 year ago by
Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
The page I need help with: [log in to see the link]
-
This topic was modified 1 year ago by
-
Hi there! As you are using a premium theme, you should be able to ask the theme vendors for support, as the issues you’re having are caused by the theme styles.
Though I’m not 100% sure what you’re aiming for with the layout, I can help out with a quick fix for adjusting the margins between those widgets. If you go into the “Customize” section of your dashboard, under “Additional CSS”, add the following lines:
.header-widget-area .widget_text { margin-bottom: 0; }
.header-widget-area .widget:last-of-type { margin-bottom: 22px; }
.header-widget-area .widget-wrap { margin-top: 0; }
Then hit “Publish”.
You can also fiddle with the values in those lines and see if it helps.
Thank you for the advice! I will get in contact with the Theme vendor – I thought this would be an easy fix haha
But the margin layout looks much better, thank you!
Hi @sstoneking,
You can try to recode the headers without relying on the theme:
<style type="text/css"> #header{ width: 600px; border: solid blue 3px; padding: 10px; overflow: auto; } #logo { width: 40%; background: #e8e8e8; float: left; padding: 10px; } #subscribe{ width: 20%; height: 150px; background: #e8e8e8; float: right; padding: 10px; } #resources{ width: 20%; height: 150px; background: #e8e8e8; float: right; padding: 10px; } #translate{ width: 20%; height: 150px; background: #e8e8e8; float: right; padding: 10px; } </style> <div id="header"> <div id="logo"> // contains logo </div> <div id="subscribe"> // no Subscribe button yet </div> <div id="resources"> // Contains COVID-19 Resources </div> <div id="translate"> // Contains translate options </div> </div>
Let me know if my answer can help you resolve your issue.
-
This reply was modified 1 year ago by
LitExtension_Lucas.
-
This reply was modified 1 year ago by
- The topic ‘Header widgets unaligned with header’ is closed to new replies.