Place custom Widget Area above the menu

[Andras]

Hi,

I would like to have a widget area above the menu. I am using a Monochrome Pro theme, but I would be happy to use another theme if having a WA is easier with an other one.

So currently it is Monochrome Pro and I included a custom WA and hooked it to "Get-Header", as this was the highest placed hook according to this guide:

Genesis Visual Hook Guide

The problem: the new WA is still under the menu. How can I get one above the menu?

Is there a different theme I should use?

FYI the code I indcluded in functions.php:

genesis_register_sidebar( array(
'id' => 'custom-widget',
'name' => __( 'Custom Widget', 'genesis' ),
'description' => __( 'Custom Widget Area', 'childtheme' ),
) );
add_action( 'get_header', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
genesis_widget_area( 'custom-widget', array(
'before' => '<div class="custom-widget widget-area">',
'after' => '</div>',
) );

https://folia.wkt.hu

[Victor Font]

Genesis doesn't have a get_header hook. The Genesis header hooks are genesis_before_header, genesis_header, and genesis_after_header. All Genesis hooks start with the word genesis_.

If you look at the source code for your page in the browser, you'll see that your custom widget area is directly beneath the body tag, which is way above the genesis header. It's also above all the scripts that belong in the head section of the page. By using the wrong hook, you've placed it way too high in the HTML Document Object Model.

The reason you don't see it above the menu is because you didn't adjust your CSS. Your theme's site-header has a fixed position. Even if you used the right hook in the first place, it would still be positioned beneath the site-header.

To adjust the CSS, you also have to give your new widget area a fixed position and move the site-header down to make room for the new widget area. Or, you can remove fixed position from the site-header, and everything will appear in its natural position.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Andras]

Hello Victor!

Thank you for your reply.

I changed the hook to "genesis_before_header"

I removed the fixed position for the site-header:

.site-header {
background-color: #fff;
border-bottom: 1px solid transparent;
min-height: 80px;
padding: 10px 40px;
/* position: fixed; */
top: 0;
width: 100%;
z-index: 9999;
}

What am I still missing?

[Andras]

Thnak you, the issue is solved.

[Author]

Posts