Support » Fixing WordPress » 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 month, 3 weeks 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]

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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.

    Thread Starter sstoneking

    (@sstoneking)

    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.

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