Side menu dissapearing on mouse out - Can it be done with GP?

I'm not sure I understand? It looks like you've just added more items to the main navigation?

On the page load, there is an open navigation (that was not supposed to be) and when you click on the hamburger the navigation that is supposed to normaly open, opens.

Not sure how the first (open navigation) went there and not sure how to get rid of it.

To be more clear. The page should load with the menu closed showing just a green stripe on the left and showing just the hamburger icon.
Whem hamburger clicked it should open showing the logo and main navivation in a vertical order.

That is how it was working since yesterday. I'm not sure if I did something and messed it up and if so what that was.

It looks like you added more menu items to the "Primary" menu. If you go to "Appearance > Menus", is there any items in that menu?

Oh! It was that simple....
Being in a hurry I added the menu options in the wrong place!

Thanks Tom!

Another couple of bits.
What is the sellector of the arrow showing in parent menu items so I can disable it? (make it non viewable)

I found that in the documentation, but it doesn't seem to do the job

.sf-menu.sf-arrows .sf-with-ul:after, .sf-menu.sf-arrows > li:hover > .sf-with-ul:after, .sf-menu.sf-arrows > .sfHover > .sf-with-ul:after, .sf-menu.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows .sf-with-ul:after {
      display: none;
}

How can I vertically align the main menu choices with the parent menu items (you can see that the first ones have an indent).

And last, how can I remove some margin from the active menu choice (the number picels of the "leave bullet") so I can align its text with the other choices text?

Thanks once again!

Hello

Updating this

I removed the arrows with
`.menu-item-has-children .dropdown-menu-toggle {
display: none;
}

What is now remaining is:

To adjust the menu items (both single menu items and parents). That is removing the existing padding or margin from the parent menu items.

To center everythin in the navigation (singlle menu items, parent menu items, child menu items)

Any help?

Thanks! :)

Give this CSS a shot:

.slideout-menu .current_page_item > a:before {
    margin-left: -37px; /* width of bullet image + margin */
}

body:not(.rtl) #generate-slideout-menu .slideout-menu .menu-item-has-children>a:first-child {
    padding-right: 20px;
}

Looks much better now.

Thanks a lot Tom!

Hello once again.

You told me that I can chage the hamburger menu icon with

.slideout-toggle a:before {
    content: "\f013";
}

or change it with an image with

.slideout-toggle a:before {
    content: url(URL TO YOUR IMAGE);
}

Can you please let me know how to change the X icon for closing the menu?
(actually what I can't find is the selector)

thanks

Try: .slide-opened .slideout-toggle a:before

Thanks Tom. You 're great!

I added the menu arrows and the menu looks decenterd again.
Any help?
And one more thing. Can I move the arrows next to the text (with a very small gap inbetween)?

Thanks

In that case, remove this CSS we added:

body:not(.rtl) #generate-slideout-menu .slideout-menu .menu-item-has-children>a:first-child {
    padding-right: 20px;
}

And add this:

.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
    float: none;
    margin-left: 10px;
}

Thanks Tom!
I think I will need to mention you in that site as a menu sponsor or something :)

Is there some way to center the text together with the arrow?

By the way, last CSS added decentered the logo somehow.

Another thing is that when I chose vhild menus to open on hover (form customizer) the menu is getting decentered again....

Actually, re-adding this should center it:

body:not(.rtl) #generate-slideout-menu .slideout-menu .menu-item-has-children>a:first-child {
    padding-right: 20px;
}

The logo and sub-menus look centered to me. There is a gap to the right of the logo being caused by 33px of padding you've added.

Everything looks fine now.

Can you please let me know how can I make the navigation dropdown on hover?
It doesn't seem to work when I select the relevant customizer option (for primary menu) and it also de-centers some menu elements (in some pushes the arrow in next line).

I'm leaving it with the option (navigation menu > hover) selected so you can see what I mean

Thaks a lot!

Dropping down on hover isn't recommended, as it causes jumpyness when the user moves from menu to menu. If you use the click dropdown type, it will go straight down. Hover will go out to the right, as it's way more user friendly that way.