NavBar Center Content - BootStrap
I am trying to center the contents of the Nav pane, but I cannot get it to work fine
I think everything seems to be more left-aligned than center, but I didn't use float: left where
I am trying to Center Image and Navigation
code:
<!DOCTYPE html>
<html>
<head>
<title>Soni Computer Repair</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand"><img src="Final.png"/></a>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h6 class="text-center">Copyright © Soni Computer Repairs</h6>
<p class="text-center">www.SoniRepairs.com</p>
</div>
</footer>
</body>
</html>
CSS: This is the CSS code
.nav, .navbar-nav {
text-align: center;
}
.container img {
height:100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
@media screen and (max-width: 500px) {
.navbar-nav, .container img{
margin-left: auto;
margin-right: auto;
display: table;
table-layout: fixed;
float:none;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
}
+3
source to share
1 answer
HTML: I have moved the navbar mark to the ul
<div class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<a class="navbar-brand"><img src="Final.png"></a><li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
CSS: I added these 3 lines
@media (min-width: 768px) {
.navbar-nav { float: none; }
.navbar-nav>li { float: none; display: inline-block; }
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { float: none; display: inline-block; }
}
This works for me. Enjoy =)
0
source to share