Docs

[mattdmedia]

Hey Lely and the rest of the team!

It’s all working now! Thanks so much 🙂 I really appreciate it.

I went through the above forum and added the sub-delay CSS and a few others – I think their might be some potential overlapping CSS but it is working. I’m seeing if it can be simplified.

Do you want a have a quick look and see if anything stands out? It seems I can ditch this code and it still works as the hover colors come in at the end again.

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

Full Code 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";
}

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

/*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;
}

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

/*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;	
	box-shadow: none;
}

/*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;
}

/* AVOIDING SUB-MENU DELAY */
.x-navbar .desktop .x-nav li > .sub-menu {
	display: none;
}
.x-navbar .desktop .x-nav li:hover > .sub-menu {
	display: block;
}

/* MENU ACTIVE*/
.x-navbar .desktop .x-nav>li>a,  .x-navbar .desktop .x-nav>li.x-active>a {
  color: rgb(168,173,173)!important;
  background-color: transparent!important;
	transition: none !important;
}
  
/* MENU HOVER COLORS */
.x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav > .current-menu-item > a {
  color: white !important;
  background-color: rgb(108,114,119)!important;
}
.site .x-navbar .desktop .x-nav>li:hover>a, .site .x-navbar .desktop .x-nav > .current-menu-item > a {
  color: white !important;
  background-color: rgb(108,114,119)!important;
}

Thanks Again!

[Jade]

Hi there,

Yes you can get rid of this code:

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

Since there is another CSS styling that sets the hover color of the links to white.

[mattdmedia]

Hi,

Thanks for the help on this menu!

I’m trying to add a button in the menu but can’t get rid of the hover background with it and keep the menu intact. Screenshot attached.

The ID for the button style is #navbtn and I also tried using it’s menu item #menu-item-116.

Adding the button ID into the CSS below worked but it also broke the active hover for the main menu.

.site .x-navbar .desktop #navbtn .x-nav>li:hover>a, .site .x-navbar .desktop .x-nav > .current-menu-item > a {
  color: white !important;
  background-color: rgb(108,114,119)!important;
}

Any ideas would be great!
Thanks,
Matt

[mattdmedia]

Menu for the site – http://bodybarstudios.wpengine.com/

[Christopher]

Hi there,

Please update your code to :

.site .x-navbar .desktop .x-nav>li:not(.menu-item-116):hover>a, .site .x-navbar .desktop .x-nav > .current-menu-item > a {
    color: white !important;
    background-color: rgb(108,114,119)!important;
}

Hope it helps.

[mattdmedia]

Hi Christopher,

Thanks for that! Exactly what was needed. 🙂

Quick question – this custom menu doesn’t quick work well for mobile.

Since there’s so much CSS is there a quick way to Null it all for mobile and start from the default Integrity mobile menu?

Cheers!

[Joao]

Hi There,

You Can wrap your code in a media query:

@media(min-width: 481px) {

YOUR CODE HERE

}

Hope that helps

Joao

[Author]

Posts