Move widget area of header to the top

Hi, if you’re familiar with WordPress hooks, take a look in header.php to see where the widget region is hooked in. In your child theme just unhook that function then hook it back in with a lower priority.

You’ll probably need to add some custom CSS to align the widgets. Again, this should be done in your child theme.

I would like to know what’s the best way to move the header’s widget area to the very top of the page (as the very first div of my header).

Do you want to place it above the nav menu and logo?

Also, how could I align my widgets so they are side by side?

Use the following CSS:

.header-widget-region .widget {
    width: 31%;
    float: left;
    margin: 0 10px;
}

Hi @jameskoster and @jesin A

I’m unable to place the widgets of “social media icons” / “language option” somewhere near the top of the website. I tried to make changes. However, it affects my 100% width meta image slider. It seems like the widgets of “social media icons” / “language option” come together with the meta image slider.

How can I make the “social media icons” / “language option” and meta image slider two separate widgets? And have the “social media icons” / “language option” to the top? Ideally I would like it to be between the very top menu and the main menu, not at the very very top.

Here’s the link to the website I’m working on:
https://jessicanlessard.com/cwcf2/

I tried everything. Please let me know what I can do!
Greatly appreciate it! Thanks!

Hey,

Nice looking site ??

You can see where functions are hooked into the Storefront header here: https://github.com/woothemes/storefront/blob/master/inc/structure/hooks.php#L28

So to place the social icons markup between the primary and secondary navigations hook that function in with a priority of 40. IE:

add_action( 'storefront_header', 'social_icons', 40 );

You’ll then just need to add a little CSS to position them.

Hi @jameskoster!

Thanks. : )

I’m really new to WordPress and I can’t figure out what the markup for the “Simple Social Icons” and “Polylang” (language switcher) are. How do I find that out? Also, I tried to just use “storefront_header_widget_region” and that just duplicates it…

<?php add_action( 'storefront_header', 'storefront_header_widget_region', 40 ); ?>

Let me know what I can do!
Thanks for your help!

Hi Jess,
One simple thing would be to add your social icons to your top secondary menu. Edit your secondary menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu. You do the same with the other social icons. Try this and let me know. Regards Chris

Place the following code in your child theme’s functions.php file:

function storefront_child_widgets_init() {
        register_sidebar( array(
                'name'          => 'Topmost Widget',
                'id'            => 'topmost-widget',
                'description'   => '',
                'before_widget' => '<aside id="%1$s" class="widget %2$s">',
                'after_widget'  => '</aside>',
                'before_title'  => '<h1 class="widget-title">',
                'after_title'   => '</h1>',
        ) );
}

add_action( 'widgets_init', 'storefront_child_widgets_init' );

function storefront_child_social_icons() {
	dynamic_sidebar( 'topmost-widget' );
}

add_action( 'storefront_header', 'storefront_child_social_icons', 40 );

Save the file and go to Appearance > Widgets, you’ll find a widget area named “Topmost Widget“, place your social icons in it. We’ll then have a look at your site and help you with the CSS code to position it.

Hi @jesin A and @chris1design

Thanks for your help guys! I tried both suggestions. However, I decided to stick with what I originally started. Therefore, I went with @jesin A’s suggestion. I do see that it requires some CSS code. How should I code it?

Here’s the link (I updated it based on your suggestion):
https://jessicanlessard.com/cwcf2/

I appreciate everyone’s help so far!

You’re welcome Jess.

Place the following CSS code in the child theme’s style.css file:

.widget.widget_polylang, .widget.simple-social-icons {
    clear: right;
    float: right;
}
.main-navigation {
    padding-top: 0;
}

Hi @jesin A

I got it to work! Thank you so much Jesin and everyone else!
Link: https://jessicanlessard.com/cwcf2/

Jess

Great to hear that!

One thing I noticed in all the custom CSS rules is the use of !important even in places not required. Use it only when there is no other choice to override else it’ll build up to a mess.

https://css-tricks.com/when-using-important-is-the-right-choice/

@jesin A

Thanks for the heads up! I’ll look into that!

: )

Hi Jess, Hope it’s ok that I jump in…
I was wondering: How did you move the secondary menu (with Donate.. Contact) to the right??
Thanks ??

How did you move the secondary menu (with Donate.. Contact) to the right??

This is the code that floats the menu to the right:

.secondary-navigation .menu {
  float: right;
}