[Resolved] Menu

[Mark]

Hi is it at all possible to recreate the menu using generate press like the linked site. If so how do I go about doing this please?

Site with Menu

My own Blog

[Leo]

Hi there,

Is there a specific part of the menu you are referring to?

[Mark]

Sorry, All of it. I would like to replicate it if I can.

Its ok if not using generate press on it’s own. I was just checking. I love the look and feel of the site.

[David]

Do you mean just the Menu items and the hover effect or the Site header that has the Logo, Social Icons and then the Nav ?

[Mark]

Sorry, I only looked on a mobile device. I like the look of the menu and effects including social icons on a mobile. I don’t know if you can look at how this interacts, the nav is really good including the hover effects.

Kind regards

Mark

[David]

Aah ok, i that case you need to enable the Off Canvas Panel for mobile in Customizer > Layout > Off Canvas:

https://docs.generatepress.com/article/off-canvas-panel-overview/

The Off Canvas has its own Widget area in Customizer > Widgets that you can use to add your Social Icons. By default the widgets display below the Menu, if you want move them above it then add this CSS:

.slideout-navigation .main-nav {
    order: 5;
}

Regarding the fancy effects:

1. The hover underline only works on desktop as theirs no hover on mobile.
2. Changing the drop down toggle icon is not possible with the off canvas today.
3. The little animation on the sub menu is using Javascript, not sure we have a good solution to that either…

Set the rest up and let us know how you get on – and ill have a see if we have something similar for #3

[Mark]

Hey, thank you for such a great response, I have managed to do what you have said so far.

[David]

Come up with this .. try adding this CSS to add a little animation to the drop down menus:

#generate-slideout-menu.main-navigation .sub-menu {
    display: block !important;
    visibility: visible !important;
    max-height: 0;
    transition: max-height 300ms ease-in-out;
    overflow-y: hidden;
}

#generate-slideout-menu.main-navigation .sub-menu.toggled-on {
    max-height: 800px;
}

#generate-slideout-menu .slideout-menu .sub-menu li {
    transform: translatex(-50%);
    transition: transform 300ms ease-in-out;
}

#generate-slideout-menu .slideout-menu .sub-menu.toggled-on li {
    transform: translatex(0);
}

.dropdown-click .sfHover>a>.dropdown-menu-toggle>.gp-icon svg {
    transition: transform 300ms ease-in-out;
}

[Mark]

David, thank you ever so much for your help. You really are awesome, you all are. Its nice just how much effort you out in and you always deliver. It looks quite cool.

Mark

[David]

That does look rather cool!
Appreciate the kind words. Glad to be of help

[Author]

Posts