Repositioning Navbar and links

Question

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.

enter image description here

That image doesn't explain what you're trying to accomplish. Please elaborate. — isherwood, Jun 27 '14 at 17:14
Please add more info about what you are trying to do, and what you have tried already, or else we really can't help you. — forgivenson, Jun 27 '14 at 17:34

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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.

Here's a Demo in Fiddle

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:

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;
}

Repositioning Navbar and links

1 Answers1

Here's a Demo in Fiddle