Add social and a button before burger

This isn’t the site I want to change since it’s live so here’s an example of a main menu with a bordered button and social in the default locations (private). Thanks again! :)

Hello, again

I figured it out except for one very simple question, please. I looked at the docs and added this to my functions.php in my child theme directory –

<?php

//--------------------------------

// Header widget area

//--------------------------------

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header' );
}

?>

Then I created a new widget called ‘header’, and added in some basic custom HTML to create a text link –

Register Now

Then I added the css to style and adjust the position of the register ‘button’ –

/* Widget text and background */

#top #header #header_main .widget {
    line-height: 88px; /* tweaks the vertical height of the text */
    color: red;
    /* background: green; just to see where it sits on the screen */
	text-align: right;
	margin-right: 80px;
	min-height: 150px; /* same as custom main menu height */
}

/* Widget title */

#top #header #header_main .widget h3.widgettitle {
    color: #ff00ff;
}

/* Widget link */

#top #header.header_color #header_main .widget a {
	font-family: 'interstate-regular';
	font-weight: normal;
	font-style: normal;
	font-size: 15px;
	letter-spacing: 4px;
	text-decoration: none;
	text-transform: uppercase;
    color: #41ab97;
	padding: 5px 15px;
	border: 1px solid #41ab97;
	min-width: 240px; /* using this to make all site buttons the same width */
}

#top #header.header_color #header_main .widget a:hover {
    background: #41ab97;
    color: #fff;
}

/* widget id - does the same as text & bg, above */

#custom_html-6 {

}

It worked perfectly, but when scaling down to mobile, I’ve added in a gray background just to see what it’s doing and I’m trying to reduce the height of the widget block – I set it to 75 (half of what it is on desktop), but it’s not taking effect. Of course, I could simply hide the gray background and it’s sitting perfectly with some tweaking to the css, but I’d like to know how to target that gray area to make it a smaller height. Here’s what I have but the max-height is not working.

I’d like to know how to target that gray to make it 75 or something close to that :)

/************************** break point 989 *******************/

@media only screen and (max-width: 989px) {
	/* start */

/* Widget text and background */
	#top #header #header_main .widget {
	    background: gray;		
	    line-height: 30px; /* reduced vertical height - 88px for desktop */
		margin-right: 60px;
		max-height: 75px !important;  /* reduced from desktop size of 150 custom main menu height */
	}

/* end max 989 */
}

And then on smaller mobile I simply hide the widget –

/************************** mobile to tablet portrait *******************/

@media only screen and (max-width: 767px) {
	/* start */

	/* Widget text and background - hide register button */

	#top #header #header_main .widget {
		display: none !important;
	}				

	/* end max 767 */	
}

That worked perfectly! Thank you so much :)