0

I am making a responsive twitter bootstrap template for joomla 2.5/3.x versions.

But problem is implementing top menu of joomla. I have a menu in joomla, with some menu items has sub menu items, so when mouse is placed on any item, those sub menu items will be shown normally.

I've tried this code in my template - 

<div class="navbar navbar-fixed">
    <div class="navbar-inner">
        <div class="container<?php echo $template_width; ?>"> 
            <?php if($this->countModules('top-nav')) : ?>
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
            </a> 
            <?php endif; ?>
            <?php echo $custom_logo; ?>
            <?php if($this->countModules('top-nav')) : ?>
            <div class="nav-collapse">
                <jdoc:include type="modules" name="top-nav" style="none" />
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>

As you see, when I place my joomla menu from module manager to "top-nav" position, that menu will be displayed at top of template.

But it does show menu as well as sub menu items for some menu items, which is not expected as I want those sub menu items of main menu item will be hidden and will be displayed on mouse over. I saw in bootstrap tutorials this way things works well but not in my case.

So please help with examples to make navigation menu work. Also I used bootstrap 2.3.2 version as latest bootstrap 3.0.0 version even does not show menu.

Also my another concern is joomla 3.x already have bootstrap, so it looks like I will have to include only those existing instead of the way I include bootstrap in joomla 2.5 versions.

In this case how do I ensure compatibility of my template for both joomla 2.5 and 3 versions? as in template I using bootstrap 2.3.2 version for joomla 2.5 versions.

Martin54
  • 1,349
  • 2
  • 13
  • 34
developer
  • 78
  • 1
  • 13

1 Answers1

1

Consider using the JS_WRIGHT template framework. All of those issues and a lot more are already worked out for you. See: https://github.com/joomlashack/wright

ranwilli
  • 56
  • 3
  • thanks for the info, it looks great, but look like need to spend money to use it without branding.though the code is complex but i will find out how wright implemented top menu. – developer Nov 03 '13 at 20:03
  • it seems to me a little bit hard to go through all codes to find out how menu system worked with bootstrap.so i am thinking to write own css and js codes to display sub menus on mouse hover, if there is no other easy ways out there and it does not break bootstrap responsive nature. – developer Nov 03 '13 at 22:39
  • No i could not find ways to do yet. plz help to implement bootstrap nav menu with easy codes – developer Nov 05 '13 at 14:18