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 3 years, 4 months 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)
  • The topic ‘Header widgets unaligned with header’ is closed to new replies.