CODEWITHSUNDEEP
twitter-bootstrapmenuresponsive-design
Austin Peterson
Austin Peterson

Reputation: 123

Bootstrap Menu Collapse Custom Design

I created a menu and designed it in CSS. Now I am trying to make it responsive with Bootstrap. As you can see everything looks like it work until you click on the button to open the menu (on a small screen) the menu items are presented horizontally and not vertically. Also it does not expand the background of the menu and bleeds into the main content. How do I tackle these two problems and is there a way to create an entire different menu for the small size screens when it breaks the bigger menu.

<nav class="center-block text-center menu bg" role="navigation">


        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="glyphicon glyphicon-align-justify"></span> 
        </button>


        <ul class="main-nav visible-sm-inline-block navbar-collapse collapse">
          <li><a href="#home" class="button one active">Home</a></li>
          <li><a href="#about" class="button two">About</a></li>
          <li><a href="#galleries" class="button three">Galleries</a></li>
          <li><a href="#services" class="button four">Services</a></li>
          <li><a href="#media" class="button five">Media</a></li>
          <li><a href="#blog" class="button six">Blog</a></li>
          <li><a href="#contact" class="button seven">Contact</a></li>
        </ul>

      </nav>

Thanks!

Upvotes: 0

Views: 791

Answers (2)

Austin Peterson
Austin Peterson

Reputation: 123

I should have been using MEDIA QUERIES. man do I feel dumb.

Upvotes: 0

Smokey
Smokey

Reputation: 1897

here is the solution. tested & works fine.

<nav role="navigation" class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="navbarCollapse" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" class="button one active">Home</a></li>
            <li><a href="#about" class="button two">About</a></li>
            <li><a href="#galleries" class="button three">Galleries</a></li>
            <li><a href="#services" class="button four">Services</a></li>
            <li><a href="#media" class="button five">Media</a></li>
            <li><a href="#blog" class="button six">Blog</a></li>
            <li><a href="#contact" class="button seven">Contact</a></li>
        </ul>
    </div>
</nav>

Check this out in responsinator.com https://www.dropbox.com/s/65edl33z9iqpxsc/Weddings%20by%20Kathy.rar

Upvotes: 1

Related Questions