Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by eeeee eeee
eeeee eeee
16,283 Points

Bootstrap Navbar Center

How can I center the links in bootstraps navbar? I also don't want them to collapse when resized to smaller scale.

    <nav class="main-nav navbar-fixed-top navbar-default" role="navigation">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <li class="nav-item"><a class="page-scroll" href="#home">home</a></li>
          <li class="nav-item"><a class="page-scroll" href="#servicii">servicii</a></li>
          <li class="nav-item"><a class="page-scroll" href="#contact">contact</a></li>
        </ul>
      </div>
    </nav>

CSS to prevent navbar from collapsing

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

2 Answers

Craig Watson
Craig Watson
27,930 Points

Hi Erik, sorry for the delay.

this would be my solution...

.nav.navbar-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
@media (min-width: 768px) {
    .navbar-nav {
        float: none;
    }
}

Check out the pen with the working code on there - http://codepen.io/Craig-Watson/pen/dppYJx?editors=1100

Hope this helps :)

Craig

eeeee eeee
eeeee eeee
16,283 Points

Wow Craig, thank you so much! You're amazing :D

Craig Watson
Craig Watson
27,930 Points

Thanks Erik, glad it got things sorted for you.

When I first began using bootstrap I would often feel like I could not move away from the code it uses and could only override or tweak it. The fact is now I have learned it is there to make life easy in most cases, sometimes you can change it up for the better.

Craig

eeeee eeee
eeeee eeee
16,283 Points

Yes, I used bootstrap before but stopped coding for a while and I forgot a lot. I have these cycles going on when I get hooked up and start doing things because I'm creative and then I stop and I'm not doing anything for weeks and that's a problem, I feel like I didn't learned anything when I wanna get back.

Anyways, thanks again Craig and good luck to you! Best wishes :)

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Erik,

Are you using the v4-alpha? Or the stable version 3?

Craig

eeeee eeee
eeeee eeee
16,283 Points

Bootstrap 3, I edited my post so you can see my html and css so far

Thanks

Craig Watson
Craig Watson
27,930 Points

Hi, when you say you dont want them to collapse, do you mean you do not want them stacked vertically on smaller screens?

Craig

eeeee eeee
eeeee eeee
16,283 Points

Yes Craig exactly that's what I mean, however I managed the collapsing problem in the meantime, you can see in my post that CSS is for that.

Now I just want the links to be centered in the navbar.

Thanks Craig