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

[Resolved] Ease-in transition for mobile "Hamburger" dropdown menu

Home Forums Support [Resolved] Ease-in transition for mobile "Hamburger" dropdown menu

Home Forums Support Ease-in transition for mobile "Hamburger" dropdown menu

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #400789

    Hi there,

    My GP navigation with the mobile Hamburger dropdown menu works great, but unfortunately without an elegant ease-in transition as seen on many sites, e.g., here:
    (mobile view, elegant ease-in transition when clicking/tapping the hamburger icon)

    What I found in the GP documentation does not really fit my use case.

    It would be nice if you or anybody else here in the forum could help me with some fitting code snippet.

    CSS transition preferred, but other solutions also welcome. πŸ™‚

    GeneratePress 1.4
    GP Premium 1.4.3
    Lead Developer
    Lead Developer

    Hi there,

    That’s intentional, as people typically want instant results on mobile as opposed to transitions.

    Should be possible though – can you link me to your site?


    Hi Tom,

    I am currently only testing on XAMPP, so I can’t link you to a live site. Just wanted to thank you swiftly for your answer, since, unfortunately, I haven’t got enough time for a detailed answer right now, but I will come back tomorrow.


    Hi Tom,

    That’s intentional, as people typically want instant results on mobile as opposed to transitions.

    That’s a good reason, for sure, and I also try to avoid transitions and animations that are bad for the site’s performance and for user experience.

    OTOH, you are using the elegant slide-in navigation for mobile view on this very site, and I wonder if the same effect or a similar one would be possible for the (IMHO not so elegant) mobile *drop-down* menu.

    FYI, in mobile view, my site in progress (on XAMPP) has the “navigation logo” on the left and the Hamburger icon on the right-hand side (display:inline-block and float:right).

    Here’s the HTML, in case you should like to see it:

    <div class="inside-navigation grid-container grid-parent">
    	<div class="site-logo sticky-logo navigation-logo">
    		<a href="http://localhost/mysite/" title="mysite" rel="home">
    			<img class="header-image" src="http://localhost/mysite/wp-content/uploads/2017/09/logo-mysite.png" alt="mysite">
    		<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="true">
    			<span class="mobile-menu">Menu</span>
    	<div id="primary-menu" class="main-nav">
    		<ul id="menu-main-menu" class=" menu sf-menu">
    </div><!-- .inside-navigation -->

    I had started with the mobile slide-in navigation, but changed to the drop-down menu after the menu items in the slide-in navigation were scrambled. This being the only thing that didn’t work so far with this great theme, I tried again after your above answer and got it working now – I had only enabled it in the Customizer, but had forgotten to additionally check “Slideout Menu” as the Display Location in the Menu Settings. πŸ™‚

    But, if you happen to know a way to give the mobile drop-down menu a similar transition as the one of the slide-in navigation, it would be great to learn about it and have *two* elegant mobile menus at hand.
    Thanks a lot for your help!

    Lead Developer
    Lead Developer

    Doing something like this should work:

    @media (max-width: 768px) {
        .main-navigation .main-nav > ul {
            display: block;
            max-height: 0;
            overflow: hidden;
            transition: max-height 100ms ease-in-out;
        .main-navigation.toggled .main-nav > ul {
            max-height: 1000px;
            transition: max-height 400ms ease-in-out;

    Let me know πŸ™‚


    Wow, brilliant, thank you so much! πŸ™‚
    The only thing I had to add (latest Firefox) was width: 100% for the first declaration, since without it the menu items were half-covered and started at the height of the logo. Very nice, now I have the choice between two elegant mobile menus, thanks a lot again!

    BTW: One of the many things I really like about your theme is that I go to NU HTML Checker and the result is “Document checking completed. No errors or warnings to show.” Then on to the W3C CSS Validator and the result is “Congratulations! No Error Found”.* Try that with any of the big multi-purpose themes at ThemeForest or elsewhere…
    *Only exception are blog pages with comments: No errors indicated, but for every single article class="comment-body" there is an (unjustified) warning: “Warning: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles”, which doesn’t make any sense at all in the comment body context, does it? πŸ™‚

    Lead Developer
    Lead Developer

    Awesome, glad I could help!

    Thank you! I take the quality of code very seriously. Interesting about the comments – I’ll do some research on that πŸ™‚

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