Hints, Tips 'n Tutorials
Template Discussions
Modules / Extensions
Joostrap 101
Discussion Index
Roadmap

Native Joomla Responsive Bootstrap Vertical MenuVertical Menu's, especially the way it is expected to work in Joomla!, is not something that is super-easy to do using core Bootstrap and core Joomla! - until now !!!

This is an easy peasy way to get a responsive, mobile friendly, vertical menu to work out of the box in Joomla

- and all we're using is the native core Joomla! menu module in a Joostrap template .... here's how we do it :)

 The great thing with the Joostrap templates is that there's nothing extra to install lots of extra plugins or modules to achieve the awesomeness that's included in the Bootstrap responsive web design framework - Joostrap is Bootstrap optimised in Joomla!

So, we don't need to install anything, we just get started with going to our module manager and click the new button, and select the Menu module type to create a new menu module.  It's fairly nomal to use vertical modules in the sidebar of a website, so for now select the left or right module positions from the Joostrap templates module positions.

You also need to select the actual menu you are going to display the links from ... so select the appropriate menu you want to display in the vertical menu.  The easiest and prefered Boostrap-way of doing this is to have a menu of only one level, or set the module options to only display a single menu level.

vertical-nav-depthvertical-nav-child

If you do want to display sub-menu items, this vertical menu tutorial does not interactively expand to show sub-navigation links on hover; however, it works OK to display those sub-navigation links of the active page.

To do this you should set "Show Sub-menu Items" to "No" - otherwise it looks a bit funny.  The image with the child items showing, is how it looks as default in one of the Joostrap templates, when viewing the page "Typography" ... the child links only display on the active item with the settings described above.


vertical-nav-settingsThe next thing we want to do is set a custom class for our menu module, so we can apply some basic styling so it looks OK.

Essentially you can call this whatever you want, but for the sake of this code we have used "sidebar-nav".  The custom module classes are added in the module advanced tab and added to the "Module Class Suffix" field.


Lastly we want to add some basic styling to make it look reasonable.  We've added this to our Joostrap templates custom.css file to get the basic interface display, as per the images in this tutorial.

/* make sidebar nav vertical */ 
  .sidebar-nav .navbar {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

That's all there is to it.  Should only take a few minutes to setup and all your basic styling and full Joomla! functionality is retained.

You'll probably have to do a little tweaking of your styling via the custom.css file; but essentially this gives you what you need to get vertical menus onto your site, have them mobile friendly and responsive while respecting the basics of Bootstrap code.

Most importantly, we have not added ANYTHING, more than a few lines of CSS styling, to the code base - so no extra modules, plugins or things to maintain or slow down your site - Joostrap fundamentals of NO template framework bloat, simplicity and core optimisations rings true.

 

Let us know if you have some good examples of this method, or if there's other tutorials like this you'd like us to cover -> see you in the forum.

Supporting Partners

stackideas
sobipro
k2
akeebabackup
jomsocial
jce editor

 

Our Preferred Joomla Host's

Web Hosting

Get in Touch With us

For account or Joostrap enquiries, please get in touch with us here.

Contact us