Docs

[mattdmedia]

Hi,

I’m trying to make a custom menu and doing some test but missing one element:

1) The ability to adjust the height of the Nav Menu Background Color on Hover. In the attached link, I’m looking at getting the Nav hover background only to appear just above the links (for example ‘About’ a few pixels above) and not grey out the full Nav top bar. Screenshot example attached. http://www.mattdmedia.com/

2) Secondly, I’m using the Integrity theme. Is there a way to get divider lines between the Sub Menu Navs like the attached screenshot?

Also, can you have a look at the submenus hover transitions between the first two Nav Menu links. The Sub-Menu transition was seeming a little slow on both Chrome and Safari. Do you have any suggestions of how to speed that up? My current CSS is attached.

Thanks so much!
Matt

Current CSS:

/*REMOVE NAV HOVER BAR*/
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

/*NAV ARROW ICON CHANGE*/
.x-navbar .desktop .x-nav li > a > span::after {
content: “\f107”;
}

.x-navbar .mobile .x-nav li > a .x-sub-toggle > span i::before {
content: “\\f107”;
}

/*NAV HOVER COLORS*/
.x-navbar .x-nav > #menu-item-2353:hover > a {
color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2332:hover > a {
color: rgb(255,255,255);
}

/*SUB-MENU ALIGNMENT*/
.masthead-inline .x-navbar .sub-menu {
right:auto!important;
left:0!important;
}

/*SUB-MENU TEXT AND WIDTH*/
.x-navbar .x-nav > li > .sub-menu {
text-align: left;
font-size: 10px;
left: 0px;
top: 100px;
min-width: none;
min-width: 180px;
width: 100px;
}

/*SUB-MENU TEXT PADDING*/
.x-navbar .sub-menu {
padding:0px!important;
}

/*SUB-MENU PADDING*/
.x-navbar .sub-menu li a {
padding: 1.2em!important;
}

/*MENU+SUB-MENU BACKGROUNDS*/
.x-navbar li:hover{
background:rgb(108,114,119);
}
.x-navbar ul.sub-menu{
background:rgb(108,114,119);
border-radius: 0;
}

/*SUB-MENU TEXT HOVER*/
.x-navbar .desktop .sub-menu a:hover,
.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a:hover {
color: white;
}

[Jade]

Hi Matt,

#1 Please remove this code:

.x-navbar li:hover {
    background: rgb(108,114,119);
}

And add this:

.x-navbar .desktop .x-nav > li > a {
    height: 43px;
    padding-top: 12px;
    margin-top: 32px;
}

.x-navbar .desktop .x-nav>li a:hover {
    background-color: rgb(108,114,119);
}

#2

.x-navbar .desktop .sub-menu a {
    border-bottom: 1px solid #ccc;
}

#3 Please add this code in the custom JS:

jQuery(document).ready(function($){
	$(".menu-item-has-children").hover(function(){
		$(this).children( "ul.sub-menu" ).show(2000);
	}, function(){
		$(this).children( "ul.sub-menu" ).hide("fast");
	});
});

Hope this helps.

[mattdmedia]

Hi Jade,

That worked great for the height background adjustment have a look at the link – but now the Main link doesn’t keep the background color when you hover over the sub menu. The remove above code did that in the old version but now trying to figure out how to do it while keeping your height adjustment code.

Any thoughts?

JS worked great to! 🙂

Thanks!
Matt

[Jade]

Hi Matt,

Please update this code:

.x-navbar .desktop .x-nav>li a:hover {
    background-color: rgb(108,114,119);
}

to

.x-navbar .desktop .x-nav>li.x-active>a,
.x-navbar .desktop .x-nav>li a:hover {
    background-color: rgb(108,114,119);
}

Hope this helps.

[mattdmedia]

Hi Jade,

Beautiful, that worked! But when you hover off the Main Nav Hover Color takes a moment until it goes back to it’s normal state – the sub menus go quick.

Is that something that needs another JS code to get the similar effect?

Have a look: http://www.mattdmedia.com/

Thanks again!
Matt

[Rupok]

Hi Matt,

There is no transition set for the main menu as well. If you want to set transition for them to have the changes smoothly; you can add this under Custom > CSS in the Customizer.

.x-navbar .x-nav a {
  transition: all .3s;
}

Hope this helps.

[mattdmedia]

Hi Rupok,

That didn’t quite do the trick. The coloured hover is still taking a while to hover off. I’ve tried adjusting those settings and couldn’t see any changes.

Sorry to keep going with this! You guys have been great 🙂 There’s also something a noticed if you hover over top of the menu word it still activates the text hover colour which is white but not the hover background color so this makes the text disappear. I know we’ve brought the padding of the hover colour down but is there a work around so it appears if you don’t hover on the word to – or maybe you have to be on the word? Attached screenshots.

1) Screenshots – Hover off word and background stays for a second.
2) Hover over top of words in menu make the menu color change but don’t activate the background hover color.

This has been a tricky menu to make not sure if there’s conflicting CSS?

http://www.mattdmedia.com/

Thanks!

[mattdmedia]

Second screenshot attached now.

[Jade]

Hi Matt,

Please update the JS code we suggested previously to:

jQuery(document).ready(function($){
	$(".menu-item-has-children").hover(function(){
		$(this).children( "ul.sub-menu" ).show(2000);
	}, function(){
		$(this).children( "ul.sub-menu" ).hide("fast");
		$(this).removeClass("x-active");
	});
});

Hope this helps.

[mattdmedia]

Hi Jade,

That worked great!!

Just have one more issue from above: Is there a way to get the hover only to activate when you scroll on the Nav Menu Text? It’s activating as you run your cursor above the words in the blank white space in the menu as well.

Thanks so much!

Matt

[Rue Nel]

Hello Matt,

Thanks for updating in! To resolve this issue, please have the JS code updated and use this instead:

jQuery(document).ready(function($){
  if( $(".x-navbar").hasClass('x-navbar-fixed-top') ){
	$(".menu-item-has-children").hover(function(){
		$(this).children( "ul.sub-menu" ).show(2000);
	}, function(){
		$(this).children( "ul.sub-menu" ).hide("fast");
		$(this).removeClass("x-active");
	});
  }
});

We would loved to know if this has work for you. Thank you.

[mattdmedia]

Hi Rue and the team,

Thanks so much for helping me out on this mission!

The updated code almost did the trick! But one last piece missing.

It fixed one issue which was when you brought your cursor from the bottom of the header to the Nav text – the sub menu was firing first and the Main Nav flickered the white hover before the background. That’s perfect now!

But the opposite is the last issue – moving your cursor from the top of the header, down.
The two links with Sub-Menus have the flicker hover issue on the Main Nav but the background hover does fire. But Main Navs without submenus don’t fire their background hovers.

Hope that makes sense!

Here’s the CSS and if anyone else needs it 🙂

/*REMOVE NAV HOVER BAR*/
.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*NAV ARROW ICON CHANGE*/
.x-navbar .desktop .x-nav li > a > span::after {
  content: "\f107";
}

.x-navbar .mobile .x-nav li > a .x-sub-toggle > span i::before {
  content: "\f107";
}

/*SUB-MENU DIVIDER LINE*/
.x-navbar .desktop .sub-menu a {
    border-bottom: 1px solid #9C9C9C;
}

/*NAV HOVER COLORS*/
.x-navbar .x-nav > #menu-item-2353:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2332:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2340:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2341:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2342:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2343:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2344:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2344:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2345:hover > a {
  color: rgb(255,255,255);
}

/*SUB-MENU ALIGNMENT*/
.masthead-inline .x-navbar .sub-menu {
right:auto!important;
left:0!important;
}

/*SUB-MENU TEXT AND WIDTH*/
.x-navbar .x-nav > li > .sub-menu {
text-align: left;
font-size: 10px;
left: 0px;
top: 100px;
min-width: none;
min-width: 180px;
width: 100px;
}

/*SUB-MENU TEXT PADDING*/
.x-navbar .sub-menu {
padding:0px!important;
}

/*SUB-MENU PADDING*/
.x-navbar .sub-menu li a {
padding: 1.2em!important;
}

/*MENU Hover Height+Color*/

.x-navbar .desktop .x-nav > li > a {
    height: 43px;
    padding-top: 12px;
    margin-top: 32px;
}

.x-navbar .desktop .x-nav>li.x-active>a,
.x-navbar .desktop .x-nav>li a:hover {
    background-color: rgb(108,114,119);
}

/*MENU+SUB-MENU BACKGROUNDS*/
.x-navbar ul.sub-menu{
background:rgb(108,114,119);
border-radius: 0;
}

/*SUB-MENU TEXT HOVER*/
.x-navbar .desktop .sub-menu a:hover, 
.x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a:hover {
color: white;
}

.x-navbar .x-nav a {
  transition: all .1s;
}

jQuery(document).ready(function($){
  if( $(".x-navbar").hasClass('x-navbar-fixed-top') ){
	$(".menu-item-has-children").hover(function(){
		$(this).children( "ul.sub-menu" ).show(2000);
	}, function(){
		$(this).children( "ul.sub-menu" ).hide("fast");
		$(this).removeClass("x-active");
	});
  }
});

[Rue Nel]

Hello There,

Thanks for updating in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[mattdmedia]

Hi Rue,

Thanks for the reply. I’ve attached a screenshot with some info of the issues.

Not trying to do anything specific but having an issue with the background hover color not appearing for Nav Menu links without Sub-Menus.

Have a look at http://www.mattdmedia.com and hover around the white space in the header, the two issues are mention in the screenshot.

Thanks so much!
Matt

[Lely]

Hi There,

#1 Please check this thread:https://community.theme.co/forums/topic/change-the-menu-onhover-delay-display/

#2 It is because of the following custom CSS:

/*NAV HOVER COLORS*/
.x-navbar .x-nav > #menu-item-2353:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2332:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2340:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2341:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2342:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2343:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2344:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2344:hover > a {
  color: rgb(255,255,255);
}

.x-navbar .x-nav > #menu-item-2345:hover > a {
  color: rgb(255,255,255);
}

Please update to this instead:

/*NAV HOVER COLORS*/
.x-navbar .x-nav > li > a:hover {
  color: rgb(255,255,255);
}

No need to declare each menu if it’s the same property.

Hope this helps.

[Author]

Posts