Generatepress add Menu Hover Animation.

Generatepress add Menu Hover Animation.

Here is a tutorial on how to add Menu Hover Animation to the Generatepress Theme.

Simply add the following code into your theme style.css or custom css through the admin panel located in the following location, Dashboard/Appearance/Custom CSS

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

Adding Menu Hover Animation – Documentation

Here is a cool piece of CSS to achieve this effect: @media (min-width: 769px) { .main-navigation .menu > .menu-item > a::after { content: “”; position: absolute; right: 0; left: 50%; bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 0; height: 2px; background-color: currentColor; transition: 0.3s width ease; } .main-navigation .menu > .menu-item.current-menu-item > a::after, …

[Total: 0   Average: 0/5]

Taner Temel

Hello and welcome to my website. I love creating Accelerated eye-catching sites with cool user experiences. Since 2008 I have been developing sites using award-winning Content Management Systems and the awesome Twitter Bootstrap framework. If your website was an employee, what would its job description be? I specialise in fast mobile-responsive web design that will deliver customers and online visibility.

Leave a Reply