[Resolved] Side menu dissapearing on mouse out – Can it be done with GP?

[Harris]

Hello,

Is there some way we can achieve this menu with GP Premium?
http://themes.muffingroup.com/be/story/

In our case the menu should have submenus too.

thanks!

[Tom]

It might be possible, but we’ll have to do it in steps.

1. Turn on the slide-out menu so it’s set to both desktop and mobile.

2. In your primary menu, make sure the theme location is set, but keep the menu empty so the icon is the only menu item.

Once that’s done, link me to the site and I’ll give you some CSS 🙂

[Harris]

Thanks for your reply Tom!

The site is still on paper. I just wanted to know if it can be done so I can start it with GP and avoid going to Be theme.
Once I will set it up I will go through the steps you provided and I will link you to the site.

Not quite sure what the “theme location is set” is in step 2 but we can make it clear when the site is setup.

[Leo]

This should help: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

Lots of info on WordPress menu in that article 🙂

[Harris]

Thanks Leo. I was aware of that. Just didn’t knew it was named “theme location”.

Thanks! 🙂

[Leo]

No problem 🙂

[Harris]

Hello,

Its been a while, but its time to sort that out.

I have turn on the slide-out menu so it’s set to both desktop and mobile. (Customizer > Layout > Slide-out navigation > Both)
And in the menu settings I have set the “Display Locaion” to “Primary menu”

I have also added the logo

Guess I did it right

Thanks
Harris

[Harris]

There was a place that the url could be added, without being publicly viewed.
For some reason I can’t find it….

[Leo]

I’ve moved your URL to the original topic 🙂

So are you still having problem with this?

[Harris]

Tom told me that he could help me build a menu like the one mentioned in the begining using GP. He told me some initial steps and now that I have setup the site and have them done I asked him to further assist me.

[Tom]

Give this CSS a try:

#site-navigation {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
}

[Harris]

Hello Tom,

Thanks for the reply. It’s possitioned properly with the added CSS, but (obviously) it is not auto-closing when moving the mouse out of the menu.

How can that be achieved?

Additionally, what do I have to do in order to place the logo in the side menu?
And how can I remove the header but keep the side navigation?

Thanks
Harris

[Tom]

Ah, I didn’t notice that feature. Unfortunately that would require some custom javascript right now. In GPP 1.6 we’ve re-built the slideout navigation, so it may be worth re-visiting then.

For the logo, you can try this:

add_action( 'generate_inside_slideout_navigation', 'tu_add_slideout_logo' );
function tu_add_slideout_logo() {
    ?>
    <div class="slideout-logo">
        <img src="URL TO YOUR IMAGE" />
    </div>
    <?php
}

Then add this CSS:

.slideout-logo {
    text-align: center;
    margin-bottom: 20px;
}

Then you can remove the header with this CSS:

.site-header {
    display: none;
}

[Harris]

Hello Tom,

Its a pitty the mouseout effect can’t be aplied at the moment. Actually that was my initial question if you take a look at the thread title 🙂

About the rest, when I’m adding the css you provided for removing the header, the side menu is removed as well 🙂
How can this be handled?

Thanks
Harris

[Tom]

I could write the JS now, but it won’t work with the next version of GPP. If you update this topic when GPP 1.6 is released, we’ll figure out the JS.

As for the second issue, change the navigation location to after header in Customize > Layout > Primary Navigation.

[Author]

Posts