Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Dropdown menu mouseover styling

Home Forums Support Dropdown menu mouseover styling

  • This topic has 12 replies, 4 voices, and was last updated 3 years ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #395453
    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?

    GP Premium 1.4.3
    #395615
    Tom
    Lead Developer
    Lead Developer

    Try replacing:

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

    With:

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

    #395820
    Tony

    No joy I’m afraid Tom.

    #395934
    Tom
    Lead Developer
    Lead Developer
    #395936
    Tony
    #396248
    Tom
    Lead Developer
    Lead Developer

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

    #396380
    Tony

    Made this edit yesterday after your suggestion.

    gp-nav-css

    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;
    }
    
    #396722
    Tom
    Lead Developer
    Lead Developer

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

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

    #397758
    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.

    #397759
    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.

    #397983
    Tom
    Lead Developer
    Lead Developer

    This should do it:

    .main-navigation .sub-menu li {
        text-align: center;
    }
    #412241
    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.

    View post on imgur.com

    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?

    View post on imgur.com

    (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!

    #412445
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.