I am new to Bootstrap and was wondering how to reposition the navbar and also how to reposition the links in the navbar.
Any help welcome.
I am new to Bootstrap and was wondering how to reposition the navbar and also how to reposition the links in the navbar.
Any help welcome.
This question shows very little by the way of effort, but just to get you started, here's a little customization of the Bootstrap Navbar. If this doesn't meet your needs, please use it as a starting point to ask a more focused question in the future.
I've added all the links to the navbar-collapse
section. I've hidden the navbar-header
with visible-xs
so it doesn't interfere with position of the other links in the open position and will only show up once collapsed on a small screen.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Header -->
<div class="navbar-header visible-xs">
<button type="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>
<a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#Courses">Courses</a></li>
<li ><a href="#About">About Us</a></li>
<li><a href="#News">News</a></li>
<li class='trapezoid'><a href="#Home">Home</a></li>
<li><a href="#Awards">Awards</a></li>
<li><a href="#Projects">Projects</a></li>
<li><a href="#Contact">Contact Us</a></li>
</ul>
</div>
</div>
</div>
Then you can style the home link to be a little more distinguished. I used this trapezoid code:
<!-- language: lang-css -->li.trapezoid {
border-bottom: 50px solid #e7e7e7;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}
li.trapezoid a {
padding-left: 0;
padding-right: 0;
text-align: center;
}