CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Takshak Rajput
Takshak Rajput

Reputation: 139

Bootstrap navbar icon and toggle button issue

In the collapsible navbar, I have added a logo image but it is not responsive so I added a media query to shrink it but when I shrink the screen the toggle button moves down and the icon inside the toggle button not visible.

.navbar{
	background-color: #fff;
	padding: 0px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.54), 0 2px 10px 0 rgb(175, 175, 175);	
}
.navbar-toggler{
	background-color: #2196f3;
	margin-right: 10px;
}
.dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #2196f3!important;
}

/* media queries */
  @media (max-width:490px){
    .navbar-brand > img{
    	width: 80%;
    }
    .navbar-brand{
    	margin-right: 0px;
    	/*text-align: center;*/
    }
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container">
  	<a class="navbar-brand" href="#"><img src="https://i.imgur.com/E1r683u.png" class="img-fluid"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">
    
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>  
    </ul>
  </div>
  </div>  
</nav>

Upvotes: 0

Views: 141

Answers (3)

sadegh
sadegh

Reputation: 1642

you must change width of .navbar-dark .navbar-brandin @media

@media (max-width:...px){
    .navbar-dark .navbar-brand{
       width: ...; 
    }
}


.navbar{
	background-color: #fff;
	padding: 0px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.54), 0 2px 10px 0 rgb(175, 175, 175);	
}
.navbar-toggler{
	background-color: #2196f3;
	margin-right: 10px;
}
.dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #2196f3!important;
}

.navbar-toggler{
  color:#2196f3 !important;
  border-color:#2196f3 !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(33,150,243, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.nav-link{
  color:#2196f3 !important;
}
.nav-link:hover{
  color:#8ac6f6 !important;
}
/* media queries */
  @media (max-width:890px){
    .navbar-brand{
       width: 50%; 
    }
    .navbar-brand{
    	margin-right: 0px;
    	/*text-align: center;*/
    }
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container">
  	<a class="navbar-brand" href="#"><img src="https://i.imgur.com/E1r683u.png" class="img-fluid"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">
    
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>  
    </ul>
  </div>
  </div>  
</nav>

Upvotes: 1

Anubhav Mishra
Anubhav Mishra

Reputation: 31

Bootsrap provide us the efficient way for this i.e., row and column feature.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="row"><div class="col-8">
    <a class="navbar-brand" href="#"><img src="https://i.imgur.com/E1r683u.png" class="img-fluid"></a></div>  <div class="col-4">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">        
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>  
    </ul>
  </div>
  </div>  
  </div>
</nav>

Upvotes: 1

aprouja1
aprouja1

Reputation: 1810

This is due to the bootstrap .container class having a flex-wrap value of wrap. adding this:

.container{
  flex-wrap:nowrap !important;
}

https://jsfiddle.net/ukynjx3L/1/

Upvotes: 0

Related Questions