How in Bootstrap3 Navbar to collapse the button and the search bar into 2 buttons with icons?

S

Sieghardt Meisner2015-11-14 15:37:43

css

Sieghardt Meisner, 2015-11-14 15:37:43

In general, it is necessary that, at a small resolution, the "Personal Account" button folds into a button with a little man icon (it seems that there is such a thing in bootstrap), and the search bar into a button with a magnifying glass icon. How to implement it?
Here is my listing:

<!DOCTYPE html>
<html lang="ru">
  <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>ЯРГА</title>

    <!-- Bootstrap CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="weidmanns.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <nav class="navbar navbar-default top" role="navigation">				
        <div class="container-fluid">
          <div class="col-md-2"></div>
          <div class="navbar-header">
            <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        		<img style="max-width:150px; margin-top: -7px;"
             src="D:\Sieggikods\JaRGA\image\logo.png"></a>
          </div>
          <div class="col-md-1"></div>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Поиск по сайту">
            </div>
            <button type="submit" class="btn btn-custom">Искать</button>
        	</form>
        	<!--<div class="col-md-3"></div>-->
          <form class="navbar-form navbar-right col-md-offset-2">
          	<button type="button" class="btn btn-custom">Личный кабинет</button>
          </form>   
          <div class="col-md-2"></div>   
        </div>
      </nav>
    </header>
  </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

RodgerFox, 2015-11-14
@RodgerFox

getbootstrap.com/css/#responsive-utilities-classes note, the simplest duplication (i.e. creating special buttons for mobile) is more difficult to use media in css and change the shape, this icon font can be added through pseudo-classes, note: :before, ::after