full width sub menu styling

Hey clairemartindigital!

Thank you for using Enfold.

Please add this in the functions.php file.

// menu active
function add_custom_script(){
?>
<script>
(function($){
	// cache selectors
	function ab() {
		var lastId,
		    topMenu = $(".av-subnav-menu"),
		    topMenuHeight = topMenu.outerHeight(),
		    // all list items
		    menuItems = topMenu.find("a"),
		    // anchors corresponding to menu items
		    scrollItems = menuItems.map(function(n, i){
			var item = $(i).attr("href");
			if (item.length && item.indexOf("#") != -1) { return item; }
		    });

			$(window).scroll(function(){
				// get container scroll position
				var fromTop = $(this).scrollTop()+topMenuHeight,
					   fromTop = fromTop + 150;

				// get anchors
				var anchors = scrollItems.map(function(n, i){
				   var item = i.substring(i.indexOf("#"));
				   return item;
				});

				var section = $('.avia-section').each(function() {
					return this;
				});

				section = section.map(function() {
					if ($(this).offset().top < fromTop)
					return this;
				});

				// get the id of the current element
				var cur = section[section.length-1];
			  	var id = section && section.length ? section[section.length-1].id : "";
				current = $(cur).attr('id');

				if (lastId !== id) {
				   lastId = current;
				   menuItems.parent().removeClass("active").end().filter("[href*='#"+current+"']").parent().addClass("active");
				}
			});
	}

	ab();

	function a() {
		$('#top .av-submenu-container').append("<a href='http://thymeforachef.com.au/#top' class='submenu_logo'><img src='//thymeforachef.com.au/wp-content/uploads/2017/01/Megara-logo-340x156.png' /></a>");
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

And this code in the Quick CSS field.

#top .av-subnav-menu > .active > a {
    color: red;
}

Best regards,
Ismael

Hi,

We modified the code a bit. Please remove browser cache before checking the page.

Best regards,
Ismael

Hey!

1.) Please add this css code.

.current-menu-item a {
    color: red;
}

Unfortunately, this is not going to work if you’re on a single post page.

2.) And add this css code.

#top .av-subnav-menu li a:hover {
    color: red;
}

#top .widget_nav_menu a:hover {
    color: blue;
}

Regards,
Ismael

Hi!

1.) Please adjust the code a bit.

#top .av-subnav-menu > .current-menu-item > a {
    color: red !important;
}

2.) I’m not sure what you mean by that. I checked the site and hover color is black while the active menu is blue.

Cheers!
Ismael

Hey!

Please add following code to Quick CSS to remove home menu item from your homepage

.home #menu-item-588 {
    display: none!important;
}

Regards,
Yigit