Expanded panel

[richardcech]

Hello, i have three questions about expanded panel menu for mobile device.

1. It is possible to shorten expanded panel from hamburger menu on mobile like on your page – https://seatheme.net/ or on page http://www.emiliotunon.com/en/

2. When i open expanded menu panel on mobile the content of page behind expanded panel strangely move up a and after that menu expand,… it looks weird, it is some kind of bug ?

3. It is possible replace symbol of hamburger menu on mobile for custom symbol ? And it is possible make larger touch field for this menu (click on it is hard) ?

My web page is richardcech.com

Thank you very much
Best Regards

Richard Cech

[SeaTheme]

Hi,

1, The CSS will be shorted it:

@media (max-width: 767px){
.responsive-ux .menu-panel-inn,.responsive-ux.admin-bar .menu-panel-inn {
    height: 50vh;
    min-height: 0;
 }
}

But the thing is that the content area will be faded out, the effect is not obvious.

2, I checked your website, the content doesn’t move up, it is faded out.

3.1, There is not the option to change the SVG.
3.2, It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:

.navi-trigger-out { 
    padding: 20px 0 20px 20px;
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[richardcech]

Hello, Thank you, I tried your custom css.

1) I think it works, but it had no effect, Is is possible to turn of – faded out effect ?
2) Yes thanks, try to look
3) It works i think well 🙂

[SeaTheme]

Hi, welcome!

1)
Please update the custom CSS:

.show_mobile_menu:not(.navi-show-icon) .menu-panel { 
    position: absolute;
}
@media (max-width: 767px){
 .responsive-ux .menu-panel-inn,.responsive-ux.admin-bar .menu-panel-inn { height: 200px; min-height: 0; }
 .responsive-ux.show_mobile_menu #wrap  { position: relative; }
}
@keyframes Opacity1to0 {
	0% {
		opacity: 1;
		position: relative;
	}
	99% {
		opacity: 1;
		position: relative;
	}
	100% {
		opacity: 1;
		position: relative;
	}
}
@keyframes Opacity0to1 {
 
	0% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}
@keyframes transY_100to0 {
 
	0% {
		transform: translate3d(0, -100%, 0);
		position: absolute;
	}

	100% {
		transform: translate3d(0, 80px, 0);
		position: absolute;
	}
}

ps: It will affect the header icon, but you don’t activate the header icon. It should be ok.

Best

[richardcech]

Hello,
it is absolutely perfect !!

I noticed that when I scroll down and click on Hamburger menu I don’t see menu, then I must scroll up to see things from menu, do you have any idea how to fix it ?

Please try that on my web page when you scroll down and open hamburger meno on mobile device for example on thist page: http://richardcech.com/projects/

Thank you
Best Regards

Richard Cech

[SeaTheme]

Hi, welcome!

The animation doesn’t work with it.
1) Please update the custom CSS:

.show_mobile_menu:not(.navi-show-icon) .menu-panel {
position: fixed;
animation: none; 
top: 80px;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 0s;
transition: all 0s;
}
@media (max-width: 767px){
 .responsive-ux .menu-panel-inn,.responsive-ux.admin-bar .menu-panel-inn { height: 200px; min-height: 0; }
 .responsive-ux.show_mobile_menu #wrap  { position: relative; }
}
@keyframes Opacity1to0 {
	0% {
		opacity: 1;
		position: relative;
	}
	99% {
		opacity: 1;
		position: relative;
	}
	100% {
		opacity: 1;
		position: relative;
	}
}
@keyframes Opacity0to1 {
 
	0% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}
@keyframes transY_100to0 {
 
	0% {
		transform: translate3d(0, -100%, 0);
		position: absolute;
	}

	100% {
		transform: translate3d(0, 80px, 0);
		position: absolute;
	}
}

Best

[richardcech]

Hello,
it works very nice :), but when I am turning of hamburger menu it probably make animation of text return. It looks weird on white background, I think maybe turn off animation of returning text in menu ? Or do you have any other nice solution ?

Thank you
Best Regards
Richard Cech

[SeaTheme]

Please try to add the custom CSS:

 .menu-panel  {
    -webkit-transition: all 0s;
    transition: all 0s;
}

Best

[richardcech]

Thank you very much, It is awesome.
Best Regards
Richard Cech

[Author]

Posts