user6902601 user6902601 - 9 months ago 25
CSS Question

How do I improve the responsiveness of my Bootstrap nav?

I've never used Bootstrap and I'm trying to make my nav responsive. I've make my nav responsive, but it's not formatted correctly. The logo is not centered and when the section is expanded, all the content is messy. How do I make the content look more professional?



/* Navigation */

.navbar {
background: #007BC4 !important;
padding: 10px !important;
}

.nav a {
color: white !important;
}

#sign_up {
position: absolute;
left: 100%;
top: 100%;
transform: translatex(-50%);
}

#email_form, #password_form {
padding: 5px;
font-family: 'Open Sans', sans-serif;
border-radius: 3px;
border: 1px solid #007BC4;
}

#login_button {
background: #0092ea !important;
border: 1px solid #005c93;
font-weight: bold;
font-size: 14px !important;
}

#login_button:hover {
background: #007BC4 !important;
}

#remember_label {
color: white !important;
font-weight: normal !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}

#forgot_password {
color: white !important;
position: relative;
left: 65px;
font-size: 13px !important;
}

#remember {
position: relative;
top: 2px;
}

/* End of Navigation */

<!DOCTYPE html>
<html>
<head>
<!-- CSS Files -->
<link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>

<body>
<!-- navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">

<div class="navbar-header">
<button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width: 250px; margin-top: -5px;"
src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</a>
</div>


<!-- Sign Up -->
<div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li> <a href="#"><button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button></a> </li>
</ul>

<!-- Login -->
<div class='navbar-form navbar-right'>
<form action='#' method='post'>
<input type='text' placeholder='Email' id='email_form'>
<input type='text' placeholder='Password' type='password' id='password_form'>
<button class="btn btn-primary btn-sm" id='login_button'>Login</button>
</form>

<input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>

<a href='#' id='forgot_password'> Forgot Password? </a>

</div>

</div>

</div>
</div>
<!-- end of navigation -->

<!-- JS Files -->
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
<script type="text/javascript">

</script>
</body>
</html>




Answer Source

I have tried to give professional look. please find the code here:

.navbar {
  background: #007BC4 !important;
  padding: 10px !important;
}

.nav a {
  color: white !important;
}

#sign_up {
  position: absolute;
  left: 100%;
  top: 100%;
  transform: translatex(-50%);
}

#email_form, #password_form {
  padding: 5px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 3px;
  border: 1px solid #007BC4;
}

#login_button {
  background: #0092ea !important;
  border: 1px solid #005c93;
  font-weight: bold;
  font-size: 14px !important;
}

#login_button:hover {
  background: #007BC4 !important;
}

#remember_label {
  color: white !important;
  font-weight: normal !important;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
}

#forgot_password {
  color: white !important;
  position: relative;
  left: 65px;
  font-size: 13px !important;
}

#remember {
  position: relative;
  top: 2px;
}

.navbar-brand{
	height:auto;
	padding: 0px 15px;
}
.navbar-brand img{ max-width:250px;width:100%;}
.navbar-nav > li > a{padding-top: 0;}
@media (max-width:1000px) {
	.navbar-header {
    	float: left;
		width:25%;
	}
	.navbar-brand{
		width: 100%;
		margin-top: 12px;	
		padding:0;
	}
}
@media (max-width:767px) {
	.navbar-header {
    	float: left;
		width:100%;
		margin-left: 0 !important;
	}
	.navbar-brand{
		width: auto;
		margin-top: 0px;
	}
	.navbar-brand img {
    	max-width: 200px;
	}
	.navbar-nav {
		width: 100%;
		float: left;
		margin: 7.5px 0;
	}
	.navbar-nav > li > a{
		padding: 10px 0;
	}
	.navbar-form{
		float: left;
	}
	#sign_up {
		position: relative;
		left: 50%;
		top: 0;
		width: 100%;
		padding: 8px 0px;
	}
	#email_form, #password_form{
		margin-bottom: 5px;
		width: 100%;
	}
	#login_button{
		width: 100%;
	}
}
<!-- CSS Files -->
    <link rel='stylesheet' href='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">

        <div class="navbar-header">
          <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
                <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
            </a>
            
        </div>
        
        
        <!-- Sign Up -->
        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            
			<ul class="nav navbar-nav">
                <li> <a href="#"><button class="btn btn-success btn-sm" id='sign_up'> Sign Up </button></a> </li>
            </ul>
			<!-- Login -->
			<div class='navbar-form navbar-right'>
			  <form action='#' method='post'>
			    <input type='text' placeholder='Email' id='email_form'>
			    <input type='text' placeholder='Password' type='password' id='password_form'>
			    <button class="btn btn-primary btn-sm" id='login_button'>Login</button>
			  </form>
			  
			  <input type='checkbox' name='remember' id='remember'> <label for='remember' id='remember_label'> Remember me </label>
			  
			  <a href='#' id='forgot_password'> Forgot Password? </a>
			  
			</div>
			
		</div>

    </div>
</div>

<!-- JS Files -->
  <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
  <script src='http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>