One more quick question, please. The 1px bottom border disappears below the main menu on scroll but is still there before scrolling. Please advise.

/* remove 1px hor line with scroll after scrolling - not before! */

#header_meta, #header_main.container_wrap {
  border-bottom: none;
  border: none; 
}

Thank you! Both worked beautifully. And to help others, since I set the open menu li to be aligned top, I did a small adjustment to the first item, ie, my home item –

	 /* tweak the vertical position of the menu when open */
 
	 #av-burger-menu-ul {
		 vertical-align: top; /* originally middle */
		 background: black !important; /* just to see what elemnt is targetted */
	 }	 
	 
	 /* tweaks the vertical position of the open menu items under the burger x - home is menu item 23 */
	 
	 .menu-item-23 {
		 margin-top: 150px !important;	 	
	 }
	 
 	/* or leave vertical-align as the default middle and use this */
	
 	.av-burger-overlay-inner {
 		/* top: -140px !important; */
 	}

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 definitely works, thanks, but I’d like to be able to target, say 2 bordered buttons, and 2 colored (not on my test site at the moment), so drill into that element level – this code applies to both bordered and colored. Hope that makes sense? :)

What I mean is how do I target the bordered/colored secondary menu items without using their specific item id? For example, if I wanted to style 3 colored items all the same way, what is the correct element in css to account for multiples?

Thank you, again! :)

I commented out the styling specific to the secondary menu items, and as you can see even though ‘CONTACT’ is set to bordered and ‘REQUEST A QUOTE’ is set to colored, they show up without any styling different than the default menu items.
Secondary menu –
#menu-item-49 ‘CONTACT’ is bordered
#menu-item-45 ‘REQUEST A QUOTE’ is colored

For the main menu, I removed the styling for bordered and colored, and unique styling for both does show, unlike the seocndary menu.
Main menu –
#menu-item-52 ‘CONTACT’ is bordered
#menu-item-53 ‘REQUEST A QUOTE’ is colored

Thanks, again! :)

Oh, another note – in doing more testing it seems that this sytnax works properly, otherwise I am only seeing the first select item, so after the inital pipe and comma, then separate with commas –

Please Select |, 8,9,10,11,12,13,14,15,16,17,18,19,20

Thank you, all, for this input. So, basically, validation is not possible for a select element unless there is an option for a blank first element, but it would also be good to be able to not have a blank area, so this is a bit of a conundrum.

I modified the contact.js file, and replaced the original in the parent theme’s correct directory, cleared my cache and tried again and it’s still allowing me to submit and takes me to the thank you page, so validation is still not working.

You’re correct! It was offset to the right by about 20px but I just did a screenshot and it is definitely now centered. Thank you :)

Thanks, Ismael – the code is missing it’s first bracket –

@media only screen and (max-width: 989px) and (min-width: 768px) {
	/* start */
			
	.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
    	height: 200px;
    	line-height: 200px;
	}

	/* end */
}

Now I can see the whole logo but the burger is still way up at the top, over the logo – it needs to be moved below, please :)

Hi, Jordan
I have set 5 select elements to be required, therefore, need validation but the user can click on submit and form gets processed, even though they are set to ‘is not empty’ for form validation. As per the other post, above, he got it to work and I need to do the same.

Ok, thanks, that answers one of two questions. How do I make the 5 select element validate properly, please?