[Resolved] Dropdown menu mouseover styling

[Tony]

Hi guys,

I currently use this to style my main nav menu:

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

On my dropdown menus I don’t have any styling at all and I’m struggling to come up with the CSS myself. Is there anyway of repeating the styling above for the dropdown menu?

[Tom]

Try replacing:

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

With:

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

[Tony]

No joy I’m afraid Tom.

[Tom]

Can you link me to the page?

[Tony]

https://staging.dyfiwebservices.co.uk

[Tom]

I’m still seeing your original code in there – can you double check?

[Tony]

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

[Tom]

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

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

[Tony]

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.

[Tony]

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.

[Tom]

This should do it:

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

[Daniel]

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!

[Leo]

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 🙂

[Author]

Posts