Results 1 to 3 of 3

Thread: Navbar not displayed correctly

  1. #1
    Junior Member
    Join Date
    Dec 2015
    Posts
    2

    Navbar not displayed correctly

    Hi everyone,
    I'm currently taking the first steps to create a new website, but I have encountered a problem with the navigation.
    The navbar is not visible, which means I can't click or even see the links I created in the html code below.
    Only the text "Project name" is visible, next to it there's a small. clickable button that doesn't do anything.
    Here's a picture of it: Screenshot_2.png
    HTML Code:
    <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    What is going on? I can use other bootstrap classes without a problem. When I create a div class="btn btn-success", the button will be displayed correctly.

    Thanks a lot in advance.

  2. #2
    Member
    Join Date
    Nov 2015
    Location
    Cincinnati
    Posts
    68
    I copied your code and ran it in my vs2013 and I could see the nav bar and links. Although the code looks OK, the problem could be in the way you are linking to bootstrap. Can you post your header information.

  3. #3
    Junior Member
    Join Date
    Dec 2015
    Posts
    2
    I am using Ruby on Rails and apparently, I linked the JavaScript files incorrectly. Got it to work.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •