Menu on mobile

[richardcech]

Hello,
I want to ask you how to reduce time of animation on mobile menu. For example on half time 🙂 Is is too long…
I want to make shorter animation of transforming a hamburger into a cross and scroll down the menu (time of scroll down the menu is more important) 🙂
I tried to make it myself in theme editor – custom.theme.js but I couldnt find a number wich reduce time of mobile menu animation.
Or is it done with some css code?

my web page is richardcech.com

Thank you very much
Best Regards
Richard Cech

[SeaTheme]

Hi,

Please add the custom CSS for menu icon:

.hide_mobile_menu .svg-style02-line1 {
	animation: 0.1s linear both line1_tb;
}

.hide_mobile_menu .svg-style02-line2 {
	animation: 0.1s linear both line2_tb;
}

.show_mobile_menu .svg-style02-line1 {
	animation: 0.1s linear both line1_t;
}

.show_mobile_menu .svg-style02-line2 {
	animation: 0.1s linear both line2_t;
}

Please add the custom CSS for menu panel:

.show_mobile_menu:not(.navi-show-icon) .menu-panel, 
.show_mobile_menu.ux-mobile.navi-show-icon .menu-panel, .show_popup .portfolio-panel { 
    animation: transY_100to0 0.25s linear both;
}

body:not(.show_mobile_menu).hide_mobile_menu .menu-panel, 
body:not(.show_popup).hide_popup .portfolio-panel {
    animation: transY0to_100 0.25s linear both;
}

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[richardcech]

Hello,
It works thank you very much…
I have another small issue, I try a lot to solve this by myself but I am not good enought in that…

I have very nice animation with menu in mobile version that menu smotthly slide down, But if I set up a time for slide up (closing mobile menu) It immidietly dissapear. When I set up longer time in code which you sent me in this topic, animation of menu looks really weird.. I think that white border in menu when menu is hiding (sliding up) need define same style as when menu is oppening (slide down)

Thank you very much
Best Regards
Richard Cech

[SeaTheme]

Hi,

Sorry, I didn’t find the reason. It should be caused some custom codes.

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[richardcech]

.grid-item-con:after {
-webkit-transition: all 1s;
transition: all 0s;
}

.col-md-7 {
top:50px;
}

@media only screen and (min-width: 770px) {
.logo-text {
margin-top:0px;
}
}

ul, ol {
margin-top:0px;
}

@media only screen and (max-width: 770px) { ul {
position: fixed;
z-index:100;
top: 50px;
}
}

@media (max-width: 767px) {
.responsive-ux .socialmeida {
position: static;
}
}

@media only screen and (max-width: 770px) {
footer-info {
display:none;
}
}

@media only screen and (min-width: 770px) { ul {
margin-left: -55px;
}
}

.navi-trigger-out {
padding: 20px 0px 20px 30px;
z-index:1000;
}

.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;
}
50% {
opacity: .35;
position: relative;
}
100% {
opacity: .35;
position: relative;
}
}
@keyframes Opacity0to1 {

0% {
opacity: 0.35;
position: relative;
}
50% {
opacity: 1;
position: relative;
}
100% {
opacity: 1;
position: relative;
}
}
@keyframes transY_100to0 {

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

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

}

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

.back-top-svg-img {
width: 20px;
}

@media (max-width: 767px){ .back-top-svg-img {
margin-top:30px;
}
}

svg:not(:root) {
width: 12px;
}

.entry p a:hover { color: var(–color-content-hover, #414145); }

.page-id-4422 .back-top-svg-img {
display:none;
}

.page-id-239 .back-top-svg-img {
display:none;
}

.page-id-2810 .back-top-svg-img {
display:none;
}

.footer {
background: none;
}

.module-id-1599835949439 .tw-style-a.ux-btn {
font-family: Work Sans;
font-weight: 400;
}

@media(max-width:770px) {
.footer-overlay #footer {
position: relative;
}
}

@media(max-width:770px) {
.footer-info {
–padding-topbottom-footer: 30px;
}
}

@media(min-width:770px){
#back-top.backtop-shown {
margin-right: -50px;
}
}

.back-top-wrap, .back-top-svg {
bottom: 77px;
}
@media(max-width:769px){
.back-top-wrap, .back-top-svg {
bottom: 70px;
}
}

.pswp__counter {
color: grey;
font-weight: normal;
}

.pswp__zoom-wrap {
pointer-events: none;
}

@media(max-width:769px){
.responsive-ux #header .logo-text {
font-size: 13.5px;

}
.default-logo-menu-mobile .logo-text {
font-size: 12px;
}
.logo-text {
font-size: 12px;
}
.pswp__counter {
font-size: 10px;
}
}

@media (max-width: 767px) {
.responsive-ux .foot-one-col-mobile .footer-info.footer-vertical-center-mobile {
padding-top:25px;
padding-bottom:25px;
}
}

.hide_mobile_menu .svg-style02-line1 {
animation: 0.1s linear both line1_tb;
}

.hide_mobile_menu .svg-style02-line2 {
animation: 0.1s linear both line2_tb;
}

.show_mobile_menu .svg-style02-line1 {
animation: 0.1s linear both line1_t;
}

.show_mobile_menu .svg-style02-line2 {
animation: 0.1s linear both line2_t;
}

.show_mobile_menu:not(.navi-show-icon) .menu-panel,
.show_mobile_menu.ux-mobile.navi-show-icon .menu-panel, .show_popup .portfolio-panel {
animation: transY_100to0 0.2s linear both;
}

body:not(.show_mobile_menu).hide_mobile_menu .menu-panel,
body:not(.show_popup).hide_popup .portfolio-panel {
animation: transY0to_100 1s linear both;
}

@media (max-width: 767px) {
.responsive-ux .foot-one-col-mobile .footer-info {
–fontsize_ux_cb_module_fonts_footer: 9px;
}
.responsive-ux .navi-trigger, .responsive-ux .navi-trigger-svg {
opacity: 0.6;
}

}

[richardcech]

do you see something wrong here ? I think It could be something about Ytransition or transition time….

Thank you very much
Best Regards
Richard Cech

[richardcech]

Hello,
I update it by myself. It works great, but I have one thing which I am not able to solve… when menu slide down it is from start to end of animation full not transparent white, but when menu scroll up (closing menu) it is changing slightly to transparent… could you please help mi with css code to cancel thist animation of transparation of main menu on mobile version. I want that manu when scroll up or down is constantly white no trapsparent white color

My web page is richardcech.com

Thank you very much
Best Regards
Richard Cech

[richardcech]

… and i notice that when menu starts srolling back (slide up) it put itself behind everything content on page (which looks weird,..)
so, it will be awesome when menu will be not transparent and always under everything content

Thank you very much
Best Regards
Richard Cech

[richardcech]

Hello,
SORY FOR SPAM..
But I solve problem with Z index of menu when sliding up in keyframes, but I am not able to cancel animation of opacity when menu scroll up….

Thank you very much
Best Regards
Richard Cech

[Author]

Posts