Question

I have a drop down menu in my nav bar but it has quite a few sub-items. This is fine on a larger screen, but when the nav is collapsed they’re not really important enough to take up all the room that they do.

Is there any way to close the dropdown when it is collapsed, or to remove the dropdown and subitems and replace it with an anchor tag (where it’ll go to a page where the user can select the subitem)? Or am I thinking about this all wrong?

<!-- Navbar -->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">

       <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <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>

        <a class="brand" href="/">mybrand</a>
        <div class="nav-collapse">
        <ul class="nav">
            <li<{if $contenttemplate == "option1"}> class="active" <{/if}>><a href="/">option1</a></li>
            <li<{if $contenttemplate == "option2"}> class="active" <{/if}>><a href="/option2">option2</a></li>
            <li<{if $contenttemplate == "option3"}> class="active" <{/if}>><a href="/option3">option3</a></li>
            <li<{if $contenttemplate == "dropdown"}> class="dropdown active" style="background-color:rgba(0,0,0,0.5);"
            <{else}> class="dropdown"<{/if}>>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">lists<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="/lists/number1">number1</a></li>
                <li><a href="/lists/number2">number2</a></li>
                <li><a href="/lists/number3">number3</a></li>
                <li><a href="/lists/number4">number4</a></li>
            </ul>
            </li>
        </ul>
        </div><!--/.nav-collapse -->
    </div>
    </div>
</div>

Answer 1

There are predefined classes in twitter bootstrap for responsive rendering. You can use <a class="dropdown-toggle visible-desktop" .../> to be displayed only for larger screens as you mentioned. The other classes available are .visible-phone, .visible-tablet, .hidden-phone, .hidden-tablet, .hidden-desktop.