Bootstrap navbar help

1

help i am attempting to add a navbar to my profile webpage. When i add the code, the menu items line up vertically and centered at the top of the page. Please help as i would like them to line up horizontally to the top left of my page. below is the code…

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <!--logo/company name-->
      <div class="navbar-header">
        <a href="#" class="navbar-brand">19/AD5 DesignStudio</a>
      </div>
      <!--Menu item buttons-->
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
2

Remember to use Read-Search-Ask if you get stuck.

If its bootstrap you’re going with, check out here. As for general things with bootstrap consult this page.

There are a lot of great how to’s put there. Google them out :grinning:

~Happy Hacking.

1 Like
3

Thank you very much I tried this website and also Googling unfortunately I cannot find what I did in correct maybe I will attempt to make an nav bar from scratch instead

4

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

5

Also check whether you’re using bootstrap 3 or 4 (the current default on codepen is 4-alpha6). They have slightly different classes (which is confusing).

1 Like
6

What @uiharu-s said it correct.

See: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h

For an example of it working. HOWEVER this will not working with bootstrap 4 and you will get the issue you saw.

7

thank you all for your time , I will try this asap until it works out. I will update you guys soon!

8

I have started my porfolio page this morning and encountered the same problem.

Searched for 2 hours to understand why it wasn’t working.

@uiharu-s gave an important information : codepen is now using bootstrap 4.

So I google bootstrap 4 navbar, and indeed the classes are slightly different!
Check it out here:
v4-alpha bootstrap navbar (updated classes)

1 Like
9