Menu

Hi there,

Which part are you referring to specifically?

Would something like this help? https://docs.generatepress.com/article/adding-buttons-navigation/

I speak of this: http://prntscr.com/iobfyf

Try something like this:

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

I implemented the code, but it did not work.

https://goo.gl/quPUxi

Add this as well:

.nav-float-right .inside-header .main-navigation {
    transform: skewx(-20deg);
}

Now, how do I leave the text without the effect?

https://goo.gl/quPUxi

Edited the CSS here: https://generatepress.com/forums/topic/menu-6/#post-514343

Leo,

Many thanks for the help here.

One more detail. When HOVER, the background (button) is getting square, as in the image below:

http://prntscr.com/ipeca1

Can I keep the normal text and the background with the effect?

This would be the complete CSS, so you'll want to remove what you have so far:

@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;
    }

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

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

    .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);
    }
}

We are almost there. :)

Finally, how do I leave the sub menu without this effect?

http://prntscr.com/iq3pyc

At MOBILE I would also like to leave without the effect.

Edited the CSS above :)

OK! Thank you very much.

But the sub menu still continues with the effect. How to leave it normal?

http://prntscr.com/iq8gjw

...

Ah, try adding this:

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