Add widget area to header – aligned to the right

Link to your site?

This is it. Link to my website is: https://signatureprojects.ca

Navbar Guide might help you (sometime)

You could move the social icons using this Snippet

You could use the Tagline for telephone/email. Look through these snippets

Come back if still need help

@ Moosie how did you add this text to your feature page ?

Signature Projects provides extensive consultancy and event planning services to private enterprise, local government, First Nations and not for profit organisations throughout northern British Columbia…

@ hensterrsa I used the code provided in this link:
https://presscustomizr.com/snippet/adding-widget-area-home/

Hello again rdellconsulting,
I’ve looked at everything you suggested but have not found anything that does what I want to do. The worst of it is that, until a couple of days ago, I had a widget in the header that enabled me to have the phone #/e-mail address/Facebook/Twitter icons in that big white space on the right of my header. Something happened (don’t understand what!) and I lost the widget and now I don’t know how to get it back again. (I realize that I should have kept a copy of the code but I’m a beginner who is learning things the hard way!)

I’ve tried using the code from this link … https://www.ads-software.com/support/topic/child-theme-adding-a-header-widget-area?replies=23 but the widget places the text above the header or above the navbar etc. but not on the right of the header where I want it to be. Can this code be changed somehow to get the widget where I want it?

That @ef topic became a snippet

In CSS/php there are often many ways to ‘skin a cat’, all achieving the same outcome.

The simple CSS way to reposition is to use:

.selector {
display: relative;
top: 0px; /* Adjust */
left: 0%; /* Adjust */
}

(0px/0% is the base point if no adjustments made).

.selector would be .my-extra-widget if you use the snippet

Sorry, but you’ve lost me! I’m not sure I quite understand how to do what you’re suggesting. This is what I’ve done (suggest you look at the website again (https://signatureprojects.ca). I used the snippet you suggested and adjusted the positioning of the widget in my functions.php as follows:

add_action (‘__before_navbar’, ‘add_my_widget_area’, 10);
function add_my_widget_area() {
if (function_exists(‘dynamic_sidebar’)) {
dynamic_sidebar(‘Extra Header Widget Area’);
}

This gets the extra widget into the header but as it’s located before the navbar, it pushes the navbar down, looks untidy and makes the header much deeper than I want it to be. When I had an extra widget in the header before, the text was positioned in the lower right area of the header. As it was aligned with the menu items (just above the darker grey line) it looked neat and the header overall was smaller. Any idea how I can change the position of the widget so that it doesn’t have the effect of pushing the navbar down and making the header deeper? Thanks.

In summary need to get rid of that awful big white space that is between the logo and the navbar now! I do appreciate that you’re trying to help me! Thank you!
Do you think that ElectricFeet could help as he developed the snippet you’ve mentioned? Don’t know how to contact EF though?

Try:

.my-extra-widget {
    position: relative;
    top: -80px;
    padding-right: 10px;
}
.sticky-disabled .navbar-wrapper  {
    margin-top: -100px;
}

@ef left us a few months ago for personal reasons unfortunately. Missed by @d4z and me greatly!

So we’re making progress! Thank you! I’ve changed your -80px to 50px and have got the ‘phone # etc. where I would like it to be (bottom right of the header). This is a great improvement and I’m willing to give up the social network icons that I had in that space before.

Now I can’t figure out how to close up the big white space between the top of the navbar and the bottom of the logo. This would make the header less deep (top to bottom) overall. I don’t like it as it now is.

(I’m not sure what the second part of your code does (.sticky-disabled etc). I took it out of my CSS and it didn’t make any difference to anything. I tried changing the -100px to different values but again it made no difference)

Can you help me with the size (depth) of the header please? Thank you!

/* Widget */
.my-extra-widget {
    position: relative;
    top: -80px;
    padding-right: 10px;
}
/* White space */
.sticky-disabled .navbar-wrapper  {
    margin-top: -100px !important;
}

Needs !important. You’ll have to readjust the -80px again

Hi, I’ve played around with the following codes which has had the effect of moving the navbar up and then I’ve moved the widget up too so that both are aligned BUT I still have this big deep header that I don’t want. The second part of the code you sent (/*White space*/) didn’t seem to make any change at all. Thank you for staying with me on this one. Any other ideas?

.navbar-inner {
position: relative;
left: -125px;
top: -20px;
padding: 0;
}
.my-extra-widget {
position: relative;
top: 15px;
padding-right: 10px;
}

I’ve just tried adjusting the header height but that moved the grey line to half way up the white space and made no difference to the height of the white space itself.
So I need to somehow change either the height of the white space or the position of the widget that has had the effect of increasing the white space.

This is what is in my functions.php in relation to the position of the widget:

// Place the widget area before the navbar
add_action (‘__before_navbar’, ‘add_my_widget_area’, 10);
function add_my_widget_area() {
if (function_exists(‘dynamic_sidebar’)) {
dynamic_sidebar(‘Extra Header Widget Area’);
}
}

Adjust this:

.my-extra-widget {
    position: relative;
    top: -50px;
    padding-right: 10px;
}

.tc-no-sticky-header .logo-centered .navbar-wrapper {
    margin-top: -60px;
}

.navbar.resp {
    margin-bottom: -40px;
}