Dropdown menu mouseover styling

Try replacing:

.main-navigation .menu > .menu-item > a::after

With:

.main-navigation .menu .menu-item > a::after

No joy I'm afraid Tom.

Can you link me to the page?

https://staging.dyfiwebservices.co.uk

I'm still seeing your original code in there - can you double check?

Made this edit yesterday after your suggestion.

This is all the custom CSS I've added:

/* Vertical align header  */

#site-navigation.main-navigation.stuckElement {
    
    padding-top: 20px;

}

/* nav-menu css onmouseover 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,
    .main-navigation .menu .menu-item > a:hover::after {
        width: 50%;
    }
}

/* Drop-down styling */

/* Tablet/Mobile padding for menu and logo */

@media (max-width: 768px) {

    .mobile-header-navigation .mobile-header-logo { 
    	padding-left: 20px;
    }
    .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    	padding-right: 20px;
	}
    
    .main-navigation.toggled .main-nav>ul {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
	}
}

/* Use the same method of sizing elements as Elementor does */

body * {
    box-sizing: border-box;
}

 
/* Elementor - set some default left and right padding on mobile - same as in GeneratePress */
.elementor-top-section.elementor-section-boxed > .elementor-container {
   padding: 0 20px;
}

 

/* 1. Don't set padding if an Elementor library item is embdedded within another section via shortcode */
/* 2. Don't set padding if an Elementor library item is embdedded within a standard non-full width page */
.elementor-top-section .elementor-top-section.elementor-section-boxed > .elementor-container,
body:not(.full-width-content) .entry-content .elementor-top-section.elementor-section-boxed > .elementor-container {
    padding: 0;
}

 

/* 3. Don't set padding if the section has a class of 'nopad' */
.elementor-top-section.elementor-section-boxed.nopad > .elementor-container {
   padding: 0;
}

/* Tablet/mobile nav colour background */

@media (max-width: 768px) {
	.main-navigation .main-nav {
        background-color: rgba(10,10,10,0.6);
    }
}
    
    

.main-navigation.navigation-clone {
background-color: rgba(10,10,10,0.6);
}

/* Make Elementor elements expand to fit the full available width. This is due to how Elementor puts padding all the way around columns */
.elementor-section-boxed .elementor-column-gap-default .elementor-row {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}
.elementor-section-boxed .elementor-column-gap-narrow .elementor-row {
    width: calc(100% + 10px);
    margin-left: -5px;
    margin-right: -5px;
}
.elementor-section-boxed .elementor-column-gap-extended .elementor-row {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
}
.elementor-section-boxed .elementor-column-gap-wide .elementor-row {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}
.elementor-section-boxed .elementor-column-gap-wider .elementor-row {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
}

Wherever you have this: .main-navigation .menu > .menu-item >

You need to have this instead: .main-navigation .menu .menu-item

Thanks, Tom, I was sloppy and missed an instance of it.

Just so you're aware the original CSS that has needed tweaking is a direct copy and paste from the Adding Menu Hover Animation sections of the GP Docs.

To save on creating another ticket, I'm struggling to find the class to target for the dropdown menu, I want to centre align the text in it.

This should do it:

.main-navigation .sub-menu li {
    text-align: center;
}

Hi!

Same problem here. http://poultrytech.whizz.hu/

I do not want my flag dropdown menu to be underlined if I hover it. It doesn't look good.
https://imgur.com/9qxydkb

I use the same CSS for having this underlined effect. I changed as you said Tom, but nothing.

At the bottom of my page, I use Elementor nav menu widget and there the dropdown doesnt't look good. The width is too big.

This only works in the main nav:

/*dropdown menu design*/
.main-navigation .sub-menu {
    background-color: #ffffff;
	width: 75px;
	text-align: center;
}

If my menu switches to mobile menu, would be sooo much better to do not have the dropdown. Would be much more elegant to see the 2 flags without dropdown. Is there a way to do it somehow?
https://imgur.com/6kBPvEw

(and yes, I know my mobile menu is really ugly now, I need to change the background from transparent and align it to center. I am trying to find CSS, I am not a coder :/)

Thanks Tom and sorry for the long message!

Hi Daniel,

I've just answered your question in your own thread. Can we just stick with that one? https://generatepress.com/forums/topic/menu-breakpoint-nav-menu-logo-problem/

Thanks :)