Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Resolved] Menu Animation Feature

Home Forums Support Menu Animation Feature

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #888047
    Ashley

    I’d really like to replicate the dropdown style on this site here:
    https://www.herbertwoods.co.uk/

    As far as I can see there are 3 separate elements:

    > Center Aligned Dropdown menus (underneath it’s parent anchor link)
    > Small triangle added to the top of the menu
    > subtle ‘Ease-up’ animation on hover

    Can you help with recreating any of this in GP?

    #888122
    David
    Staff
    Customer Support

    Hi there,

    i have this CSS which is something similar:

    #site-navigation ul.menu>li>ul:before {
        content: "";
        border-style: solid;
        border-width: 0 9px 9px 9px;
        border-color: transparent transparent #22181c transparent;
        height: 0;
        position: absolute;
        left: 50%;
        top: -7.5px;
        width: 0;
        -webkit-transform: rotate(360deg) translateX(-50%);
    }
    
    #site-navigation ul ul {
        transform: translatey(6px); 
        transition: 0.15s ease-in;
    }
    
    #site-navigation ul li:hover ul {
        transform: translateY(0px); 
            transition: 0.15s ease-in;
    }
    
    #site-navigation:not(.toggled) ul ul {
    	transition: opacity 0.35s linear;
    }
    #890970
    Ashley

    David, you’re a legend – thank you!

    I’ve bookmarked this for future use 🙂

    #891033
    David
    Staff
    Customer Support

    Well i am glad to be of help 🙂

    #891577
    Ashley

    Hi There,

    Sorry to be a pain, I’ve spotted a potential issue I was wondering if you could help with?

    The menu items veer off the edge of the browser window (see here – http://tinypic.com/r/2mzmmnb/9) – is there a way to prevent this from happening?

    #891649
    David
    Staff
    Customer Support

    Hmmm – so the submenus are absolutely positioned so it won’t detect the browser edge. One workaround would be this CSS:

    @media (max-width: 1300px) and (min-width: 768px) {
        #sticky-navigation li.push-left .sub-menu {
            left: auto !important;
            right: 0;
        }
    }

    And then add the push-left custom class to the Therapies menu item.

    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    You may want to tweak the max-width and min-widths to suit

    #891703
    Ashley

    That’s cracked it! – Thanks again David 🙂

    #891706
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.