Sticky menu bar on mobile

Posted in : Readme
vdesouza
Participant
23 May 2015 at 17:30
#22464

Hi guy,

Love the theme!

Quick question. I was wondering if it possible to have the top menu to stick while scrolling on mobile devices.

Thank you!
Virgilyo

vdesouza
Participant
23 May 2015 at 17:36
#22465

Or it could hide while scrolls down, but appears back when scrolling up. Either way will work perfectly.

Thanks again
Virgilyo
ahmetsali
Keymaster
23 May 2015 at 19:10
#22487
Hi, you can try this custom css code and see if it suits you.
```
@media screen and (max-width: 991px) {
    .site-navigation {
        position: fixed; width: 100%; left: 0; top: 0;
    }
    .site-header {
        padding-top: 3em;
    }
    .menu-toggle {
        margin: 10px auto;
    }
    .is-menu-toggled-on .site-navigation {
        overflow: auto; height: 100%;
    }
}
```
vdesouza
Participant
23 May 2015 at 19:49
#22489

Hello,
Thank you very much for the quick reply.

Unfortunately, that code didn’t work properly. Sorry.

ahmetsali
Keymaster
23 May 2015 at 20:16
#22497

i tested the code on chrome by resizing window, it looked working for me, which device/os you have tested on and can you provide your url with the custom css applied.

vdesouza
Participant
23 May 2015 at 20:29
#22498

I tested both on iPhone 6 plus running iOS 8.3 and Android 5.0

I applied the code under style in the Theme Options.
http://www.virgilyo.com

Thanks again.
ahmetsali
Keymaster
23 May 2015 at 20:50
#22500
oops, the custom css code i gave you is for another theme (Editor), sorry, try this one;
```
@media screen and (max-width: 767px) {
    .csstransforms.is-header-fixed .nav-menu { 
        left: -240px;
        -ms-transform: none; 
        -webkit-transform: none; 
        transform: none; 
    }
    .csstransforms.is-header-fixed.is-menu-toggled-on body { 
        left: 240px; 
        -ms-transform: none; 
        -webkit-transform: none; 
        transform: none; 
    }
    .is-header-fixed .site-header {
        position: fixed; top: 0; left: 0; z-index: 999; background: rgba(255, 255, 255, 0.95);
        }
    .is-header-fixed #main {
        position: relative; top: 54px;
        }
    .is-header-fixed.is-menu-toggled-on { 
        position:relative; overflow: hidden;
        }
    .is-header-fixed .nav-menu { 
        position: fixed; height: 100%; min-height: 100%; max-height: 100%; bottom: auto; overflow: auto; -webkit-overflow-scrolling: touch; 
        }
    .is-header-fixed.is-menu-toggled-on .nav-menu { 
        left: 0;
        }
    .is-header-fixed.is-menu-toggled-on .site-header {
        left: 240px;
    }
}
```
don’t forget to remove the other custom css code.
vdesouza
Participant
23 May 2015 at 21:03
#22502

Awesome! Looks beautiful.

Will it be too much to ask for a little more coding.

Scroll down Hide the menu, scroll up show the menu.

It would be awesome!

Thank you again for your time. Much appreciated it.

ahmetsali
Keymaster
23 May 2015 at 21:11
#22503

sorry it is not possible with custom css, it needs more hard work including javascript codes, we can only provide simple-quick css customizations, and you are welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.

vdesouza
Participant
23 May 2015 at 21:15
#22504

No problem.

Thank you again for the help. It looks superb.

I will for sure. I loved the theme.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item

Readme - A Readable WordPress Theme

by pixelwars