[Resolved] Menu

[Anderson Ojope]

Show!

I think there’s just one more thing.

When I’m in a certain category, the active menu background is square, without the effect:

http://prntscr.com/iq9ewj

http://prntscr.com/iq9f6s

And also when I go to the submenu, the text color turns white:

http://prntscr.com/iq9fes

[Tom]

Let me know if the latest changes fix it 🙂

[Anderson Ojope]

We’re almost done. 🙂

I made some minor changes adding:

color: # 1b3467!

  .main-navigation .main-nav> ul> li [class * = “current-menu-“]> a

See the complete code:

@media (min-width: 768px) {
    .main-navigation .main-nav > ul > li:hover > a, 
    .main-navigation .main-nav > ul > li:focus > a, 
    .main-navigation .main-nav > ul > li.sfHover > a,
    .main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
        background-color: transparent !important;
    }

    .main-navigation .main-nav > ul > li:hover, 
    .main-navigation .main-nav > ul > li:focus, 
    .main-navigation .main-nav > ul > li.sfHover,
	.main-navigation .main-nav > ul > li[class*="current-menu-"]:hover > a {
        background-color: #fff !important;
			color: #1b3467 !important;
			
    }

    .main-navigation {
        background-color: transparent !important;
    }

    .main-navigation .main-nav > ul > li,
    .main-navigation .main-nav > ul > li:hover, 
    .main-navigation .main-nav > ul > li:focus, 
    .main-navigation .main-nav > ul > li.sfHover {
        background-color: #1b3467;
    }

    .main-navigation .main-nav > ul > li {
        transform: skewx(-20deg);
    }

    .main-navigation .main-nav > ul > li > a {
        transform: skewx(20deg);
    }
	.main-navigation .main-nav .sub-menu {
    transform: skewx(20deg);
	}
}

The menu item with active page/category still appears square.

See only: http://prntscr.com/iqknnx

How do we correct?

Live: https: //goo.gl/kSoiuZ

[Tom]

Instead of this:

.main-navigation .main-nav > ul > li[class*="current-menu-"]:hover > a

Do this:

.main-navigation .main-nav > ul > li[class*="current-menu-"]:hover

[Anderson Ojope]

Changes made. Perfect.

But now the text (hover) has gone white: http://prntscr.com/iqp8lz

@media (min-width: 768px) {
    .main-navigation .main-nav > ul > li:hover > a, 
    .main-navigation .main-nav > ul > li:focus > a, 
    .main-navigation .main-nav > ul > li.sfHover > a,
    .main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
        background-color: transparent !important;
        color: #1b3467!important;
    }

    .main-navigation .main-nav > ul > li:hover, 
    .main-navigation .main-nav > ul > li:focus, 
    .main-navigation .main-nav > ul > li.sfHover,
	.main-navigation .main-nav > ul > li[class*="current-menu-"]:hover {
  background-color: #fff !important;
	color: #1b3467!important;	
    }

    .main-navigation {
        background-color: transparent !important;
    }

    .main-navigation .main-nav > ul > li,
    .main-navigation .main-nav > ul > li:hover, 
    .main-navigation .main-nav > ul > li:focus, 
    .main-navigation .main-nav > ul > li.sfHover {
        background-color: #1b3467;
    }

    .main-navigation .main-nav > ul > li {
        transform: skewx(-20deg);
    }

    .main-navigation .main-nav > ul > li > a {
        transform: skewx(20deg);
    }
	.main-navigation .main-nav .sub-menu {
    transform: skewx(20deg);
	}
}

[Tom]

I’m not seeing that on my side – did you get it fixed?

[Anderson Ojope]

Not yet.

This only happens when I’m on category pages.

See here: https://goo.gl/qiagjY

[Tom]

I just adjusted this CSS: https://generatepress.com/forums/topic/menu-6/page/2/#post-518962

Can you try now?

[Anderson Ojope]

Now the text has turned blue instead of white.

What I did was to separate this text that is in trouble and put it white.

See below:

@media (min-width: 768px) {
	
	.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
		color: #fff!important;
	}
	
	.main-navigation .main-nav > ul > li[class*="current-menu-"] > a {
        background-color: transparent !important;
    }
	
    .main-navigation .main-nav > ul > li:hover > a, 
    .main-navigation .main-nav > ul > li:focus > a, 
    .main-navigation .main-nav > ul > li.sfHover > a {
        background-color: transparent !important;
        color: #1b3467!important;
    }

    .main-navigation .main-nav > ul > li:hover, 
    .main-navigation .main-nav > ul > li:focus, 
    .main-navigation .main-nav > ul > li.sfHover,
	.main-navigation .main-nav > ul > li[class*="current-menu-"]:hover {
  background-color: #fff !important;
	color: #1b3467!important;	
    }

    .main-navigation {
        background-color: transparent !important;
    }

    .main-navigation .main-nav > ul > li,
    .main-navigation .main-nav > ul > li:hover, 
    .main-navigation .main-nav > ul > li:focus, 
    .main-navigation .main-nav > ul > li.sfHover {
        background-color: #1b3467;
    }

    .main-navigation .main-nav > ul > li {
        transform: skewx(-20deg);
    }

    .main-navigation .main-nav > ul > li > a {
        transform: skewx(20deg);
    }
	.main-navigation .main-nav .sub-menu {
    transform: skewx(20deg);
	}
}

Worked perfectly.

[Tom]

Awesome, glad we got it working! 🙂

[Anderson Ojope]

Hi, Leo!

I would stay here again. 🙂

I have found out only now that this change we made does with what the sub menu does not appear when the content of the page is built with ELEMENTOR.

See here: http://prntscr.com/is4amb

Live: https://goo.gl/kMhL2n

Can you put the menu and sub menu in the foreground?

Ps: I discovered that by removing the part below the code that we inserted (which I can not do), it leaves everything standard. I do not understand what the relationship is …

    .main-navigation .main-nav > ul > li {
        transform: skewx(-20deg);
    }

[Tom]

Hmm, I’m not sure – you may need to ask Elementor that. Usually it’s a z-index issue, but I’m not seeing any proof of that on your site.

[Author]

Posts