More Mobile Friendly Bootstrap Nav Bar

[lesliekirk]

Is there any sort of more mobile friendly nav bar for Base ReadyTheme? It would be nice to have something more like Iron & Wool / Suivant - that slides out from the left instead of the drop down / scroll. When there are sub-cats and sub-sub-cats it just gets messy/unruly and even though the scrollbar appears it's cludgy and confusing. Changing ReadyThemes is really not an option.

[Matt Zimmermann]

Hi Leslie,

Not out of the box. You would have to take a look at some of the available navigation structures native in Bootstrap 3 and code something up.

[Bruce - PhosphorMedia]

We used this one:

https://github.com/geedmo/yamm3

And this one:

http://www.brienlabs.com/duramenu/

[lesliekirk]

Thanks, not necessarily a slide from the left but both are a lot neater than the default.

[Bruce - PhosphorMedia]

One of the advantages of using Bootstrap is that there are literally hundreds of plugins. You could probably find exactly what you want so long as you don't nod off going through all the listings.

[lesliekirk]

One of the advantages of using Bootstrap is that there are literally hundreds of plugins. You could probably find exactly what you want so long as you don't nod off going through all the listings.

Very true. In all of your sleepless searchings did you have to find any where the mobile version slid in from the left instead of the drop-down style?

[Bruce - PhosphorMedia]

There's this one:

https://bootsnipp.com/tags/menu

[razertip]

Make sure you pick one for version 3 not version 4. There is a big difference between versions.

[lesliekirk]

Make sure you pick one for version 3 not version 4. There is a big difference between versions.

Thanks, I am.

[lesliekirk]

So I found a nifty little piece of awesome sauce that I am playing with. It slides out just as I would like it to. The demo for it has little icon arrows that indicate "more". In the HTML version they are wrapped inside the <a> tag. I'm using the &mvt:navigationitem:link; to dynamically build the links but using it doesn't enable the use (as far as I can tell) of these icons fa fa-angle-right

Maybe I need to tweak the CSS a bit.

http://dts3627.mivamerchantdev.com/storefront.html

[razertip]

Your Font Awesome does not appear to be working.
Using the page source code, I moved the icon inside the <a> tag and it did not show. I switched out your font awesome with one from a CDN - The icons show inside the <a> tag but not when outside.

You may need to use ::before / ::after in your css file.

[lesliekirk]

Thanks, since the use of the &mvt:navigationitem:link; token doesn't let me put the icon inside the <a> tag, I'll play around with the ::before / ::after.

I guess this version of the Framework doesn't have the correct font awesome files.