Kirby Mobile Menu

The CMS Questions
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.