Responsive bootstrap

Asked

Viewed 291 times

1

I have a model on the Internet that tested its responsiveness. As I decrease the width, the menu is also decreasing and getting in perfect condition. This "perfection" is up to 760px. When I do this procedure, it’s like the menu has been zooming down to 760px in perfect condition. So I wanted to know how to do this effect in Bootstrap in the menu? Example: model.

My code:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<style type="text/css">
    .container{margin-top: 20px; max-width:1004px; border:solid 1px #CCC;}
</style>
   </head>
  <body>
    <div class="container">
    <div class="row">
        <div class="col-md-6 imagem">
            <img src="imgs/logo.png" height="68" width="228">
        </div>
        <div class="col-md-6 imagem1">
            <div class="iconInput">
                <i class="glyphicon glyphicon-search pull-right" style="margin-right: 15px"></i>
                <input type="text" name="" value="" class="form-control inpuT" placeholder="Pesquisar">
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                    <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 class="collapse navbar-collapse" id="collapse">
                <ul class="nav nav-pills">
                    <li>
                        <a href=""><i class="glyphicon glyphicon-home"  aria-hidden="true" style="color: #FFF;"></i></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">CLOTHING</a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dist"><a href="#" style="color: #FFF; margin-bottom: 6px; padding: 6px 15px;">WOMEN CLOTHING</a></li>
                            <li><a href="#" style="color: #FFF; margin-bottom: 6px;  padding: 6px 15px;">MEN CLOTHING</a></li>
                            <li><a href="#" style="color: #FFF; margin-bottom: 6px;  padding: 6px 15px">INFANT CLOTHING</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">SHOES</a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dist" style="margin-bottom: 6px;"><a href="#" style="color: #FFF; padding: 6px 15px;">CASUAL SHOES</a></li>
                            <li><a href="#" style="color: #FFF; margin-bottom: 6px; padding: 6px 15px;">FANCY SHOES</a></li>
                            <li><a href="#" style="color: #FFF;margin-bottom: 6px; padding: 6px 15px;">SPORT SHOES</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">ACCESSORIES</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">JEWELLERY</a>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dist" style="margin-bottom: 6px;"><a href="#" style="color: #FFF ;padding: 6px 15px;">RINGS</a></li>
                            <li><a href="#" style="color: #FFF; margin-bottom: 6px; padding: 6px 15px;">BRACELETS</a></li>
                            <li><a href="#" style="color: #FFF; margin-bottom: 6px; padding: 6px 15px;">OTHER</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">FURNITURE</a>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">SWEETS & CANDY</a>
                    </li>
                    <li>
                        <a href="#" class="dropdown-toggle cor-letra" data-toggle="dropdown" role="button" aria-expanded="false">UNIQUE GIFTS</a>
                    </li>
                </ul>
            </div>
        </nav>
        <img src="imgs/linha.png" height="3" width="1004" alt="" style="margin-top: -19px;" class="img-responsive">
    </div>
</div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
  </body>
  </html>
css twitter-bootstrap front-end

  • You could post the code of what you have so far and create an example on jsFiddle.net

1 answer

2


You have here several examples Bootstrap Navigation Bars to suit your needs. In this case what you are looking for is the following structure:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

You got a online example in jsFiddle.

  • I get it. My code I posted, my menu when it comes to 991px width, some links go down, disrupts the menu. What can I do to keep him on the regular menu up to 768px ?

  • @Andrewmaxwell In the example I posted in my reply he is already doing it. Access here this link and resizes the result window, dragging the corners/edges to see it in action. Now just copy and replace this code from my example with the current code from your menu and make the necessary edits to the navigation links and remove the unnecessary elements.

Browser other questions tagged css twitter-bootstrap front-end

You are not signed in. Login or sign up in order to post.