[fdixon87Participant]

With help from these posts:
https://community.theme.co/forums/topic/custom-widget-area-placement/
https://community.theme.co/forums/topic/header-area-logo-align-background-colour-room-for-a-widget-area/page/2/

I have managed to place a custom widget in my header.

However I’m looking to align it to the right of the page, in line with the logo, rather than beneath it. Would you be able to help?

There is also a black dot under the logo – any idea what that is and how to remove it?

Here is the code I’ve used in my child theme’s functions.php file

add_action( ‘widgets_init’, ‘header_main_widgets_init’ );
function header_main_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Header Main’, ‘header-main’ ),
‘id’ => ‘header-main’,
‘description’ => __( ‘Widgets in this area will be shown in the header next to the logo.’, ‘header-main’ ),
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
) );
}

add_action(‘x_after_view_global__brand’, ‘add_header_widget_area’);
function add_header_widget_area(){ ?>
<?php if ( is_active_sidebar( ‘header-main’ ) ) : ?>
<div id=”header-main” class=”header-main” role=”complementary”>
<?php dynamic_sidebar( ‘header-main’ ); ?>
</div> <!– .widget-area –>
<?php endif; ?>
<?php }

[fdixon87Participant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please add the following CSS under Customizer > Custom > CSS:

#header-main {
    float: right;
}

#header-main .widget {
    list-style: none;
}

Hope it helps 🙂

[fdixon87Participant]

That’s it! Thank you.

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts