Archived topic
Side menu dissapearing on mouse out - Can it be done with GP?
70 replies · Started by Harris on November 6, 2017
I'm not too sure what you mean?
To give margin to the body when the menu isn't open, you can do this:
body:not(.slide-open) {
padding-left: 60px;
}
The slideout menu should be the default mobile menu on tablet and mobile if you have the option set to "Both".
Hello Tom,
About the body margin both your css and mine seems to be doing the job. Thanks!
About the menu, I have the option set to "Desktop"
You can see what is shown in mobile mode.
What I want is in mobile and tablet view to show the default GP menu / header (I will adjust colors etc). The one showing on the top, having the logo and the hamburger icon.
To have the slideout navigation on tablet and mobile, you need to set that option to "Both".
You shouldn't have to do anything to show the default GP menu/header on mobile. That should happen by default?
If I set it to "both" i get a left side slideout navigation on tablet and mobile.
What I am trying to achieve is a top slideout navigation on tablet and mobile as it normally happens in GP.
I have set it to "both" so you can have a look and understand better what I mean
P.S. The desktop navifation is set to slideout and its placed on the left. This should stay as it is. Desktop navigation is also set to open submenus different than the default GP way
There is no "top slideout" in GP as of right now.
When you set it to "Desktop", the regular GP mobile menu will display on tablet and mobile. Is there something about that default mobile menu you're trying to change.
Sorry for not understanding right away! :)
Tom I had it set to "Desktop" and I asked you to have a look so you can understand what was showing. :)
I have just now re-set it to "Desktop only". Please have a look and see what it looks like at the moment.
That is not the "regular GP mobile menu" (i.e. like the header in that (GP) site).
Thanks and sorry if I haven't expressed myself well on what I needed :)
Ah, I see the issue.
First, you need this CSS:
@media (max-width: 768px) {
#site-navigation {
position: relative;
}
body {
padding-left: 0 !important;
}
}
The second issue is that your main navigation has no menu items, so you will need to turn on the slideout navigation for mobile as well.
Otherwise you'll need to add all of your menu items to the main navigation, and hide them on desktop using CSS.
Hello Tom,
I added the css and enabled the slideout navigation as well.
The result is still having an 60px wide stripe on the left side when the menu is closed
And now that the main container padding is set to 0 by the new css it is also covering the content.
(you can see it).
Can't this stripe go on the top (as it normally does in GP) instead of left on tablet & mobile view?
I mean the stripe when the navigation is CLOSED.
By the way, I tried adding some sample menu items to the main navigation (I thought I could use that for the mobile menu, in order to keep it simple without the bullets and dividers the desktop menu has) but they do not seem to appear in the menu (I had first set it to desktop only before trying it).
Thanks
UPDATE
I enabled the "Mobile Header" in the Layout > Header menu in the customizer and the bar has moved on top for mobiles.
What is left is to apply the same to Tablets.
It will be much easier to display the mobile header at a desired width in GPP 1.6, which is coming out very soon :)
I managed it at the moment.
Looking forward to GPP 1.6.
One more question. Are the responsive breakpoints different between GP and Elementor?
I can see some things changing when coming down from 1025 pixels screen width and I'm not sure where that comes from.
That makes it a bit stiff to handle that gap between 768 and 1025 screen width.
Thanks
Harris
Likely. GP uses 1024 as a tablet (landscape) breakpoint, 768 as a tablet (portrait) breakpoint, and 767 as a mobile breakpoint.
Most of our mobile features begin at 768.
Thanks!
No problem :)
Can you please have a look why it now shows the menu two times?
I am playing arround for a couple of ohours and I can't figure it out.