Question about styling custom nav menus?

[sethbahookey]

Hello! I'm trying to mimic the Modern Studio Pro site (at least just the header) and I'm having some difficulties with the styling. Basically I have created two widget areas that I will post below...

//* Register a widget area to the left of Site Title
genesis_register_sidebar( array(
	'id'            => 'custom-menu-left',
	'name'          => __( 'Left Menu', 'EB' ),
	'description'   => __( 'This is a widget area that can be placed after the post', 'EB' ),
) );

//* Hook in the Menu Left Side
add_action( 'genesis_header', 'main_left_menu', 8 );
	function main_left_menu() {
		genesis_widget_area( 'custom-menu-left', array(
			'before' => '<div class="custom-left-menu">',
			'after' => '</div>',
	) );
}

//* Register a widget area to the right of Site Title
genesis_register_sidebar( array(
	'id'            => 'custom-menu-right',
	'name'          => __( 'Right Menu', 'EB' ),
	'description'   => __( 'This is a widget area that can be placed after the post', 'EB' ),
) );

//* Hook in the Menu Right Side
add_action( 'genesis_header', 'main_right_menu', 8 );
	function main_right_menu() {
		genesis_widget_area( 'custom-menu-right', array(
			'before' => '<div class="custom-right-menu">',
			'after' => '</div>',
	) );
}

Now the menus are showing, but just not in the right place 🙁 I've added a bit of styling to each menu too so they are fleshed out a little more...

.custom-left-menu li {
	float: left;
	padding: 10px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.custom-right-menu li {
	float: right;
	padding: 10px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

I took a screen shot so you can see what is going on here with the menus.. I highlighted the site-title area with google web dev tools. I circled the menus in blue, but I want them where I scribbled black. I'm assuming it has to do with CSS and somehow having those menus overlap the wrap/site-title area?

View post on imgur.com

[Christoph]

Hi,

what child theme are you using?

Your code looked pretty good on Genesis sample.
(only tested with site title and site description, not an image logo)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[sethbahookey]

Hey Christoph,

It is on the Genesis Sample Theme 🙂

Maybe I'm using the wrong kind of CSS, but I tried moving the menus down with some margin-top, but anytime I do that it moves the menus and the whole site-title area down. I just can't seem to figure out how to move the menus down without the title-area moving as well.

I know margins can be funky and have a tough time overlapping sometimes. So do you have some kind of recommendation as to how I can move the menus down so they are parallel with the "Endlessly Inconsistent" title?

Thanks

[sethbahookey]

I figured it out!!!

I had to mess around with z-indexs for this to work.

.title-area {
         z-index: 0;

.custom-left-menu,
.custom-right-menu {
	z-index: 100;
}

Now they overlap, boo ya!

[Christoph]

That's great!

I´m glad you figured it out.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts