Kirby Mobile Menu

Kirby 2 Solved ✅
1

Hello i just try to include boostrap to make mobile menu but its not work. How i can do simple to change menu when is for mobile

2

What exactly is not working? For a mobile menu, you need some css that hides the menu on mobile with media queries and shows a button instead. And you need some javascript, that acts on button click and shows/hides the menu on mobile.

3

Oh my bad… i forget to inlcude jquery. Sory for stupid question now i got it :slight_smile:

4

You are welcome. But you don’t need Bootstrap just for a mobile menu, do you? That would be overkill …

5

If you only need a responsive menu, you can skip Bootstrap (like @texnixe mentioned) and use something like http://responsive-nav.com/

…using that one (or one of the 1.000’s out there) also eliminates the need of jQuery :slight_smile:

You can ‘even’ pimp it up with an alternative hamburger…

http://codepen.io/designcouch/pen/Atyop

1 Like
6

Oh thank u i will try it :slight_smile:

7

I’m staying totally hipster for a horizontal main menu and by media-query for the mobile smartphone size only adds

.menu {
    position: relative;
    z-index: 9;
    width: auto;
    overflow: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

Believe it or not, I made this version a couple of months before Apple released their responsive website with their main nav working exactly this way.
I’ve then also added that the menu items slides in from the left to indicate scrollability (i did stole that from Apple though :smirk: ).

Apple have now moved on to a combination of the two by having hamburger for their main nav and my minimalistic hipster version for their sub navs.

8

I have problem w customization this, i include script all work, but how i can change look. i defoult have only link witch label MENU… how add custom code like menu “Hamburger”. its stupid but i have problem with this…

9

All you need to do is hook up the plugin with a custom toggle

<script>
      var navigation = responsiveNav(".nav-collapse", {customToggle: "#toggle"});
</script>

Then in your css, add a background image for #toggle

#toggle {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: block;
        width: 70px;
        height: 55px;
        float: right;
        margin: 0 -2em 1em 0;
        text-indent: -9999px;
        overflow: hidden;
        background: #444 url("hamburger.gif") no-repeat 50% 33%
    }
10

Is this in 2021 technologically still a recommended solution for a responsive navigation without much work or are there better alternatives available?

11

Maybe you can rephrase your question in a new thread, because the user you are trying to respond to hasn’t been active for ages and most people probably don’t use the suggested script.