Why Is My Bootstrap Navbar Not Displaying Inline

Why is my bootstrap navbar not displaying inline?

This is because in Bootstrap the css for li is this:

.nav>li {
  position: relative;
  display: block;
}

But for me the menu seems to appear correctly. See snippet, but only on a full page. On mobile devices it will behave like a block element since the screen doesn't have room to show them inline.

EDIT: Updated the snippit to work as requested (see comments below this answer)

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand">Rebar</a>

    </div>

    <div style="display: inline-block;">

      <ul class="nav navbar-nav">

        <li><a href="#">Link</a>

        </li>

        <li><a href="#">Link</a>

        </li>

        <li><a href="#">Link</a>

        </li>

      </ul>

    </div>

  </div>

</nav>

Navbar is not displaying inline

If I understood correctly, you can just add this to the CSS:

.nav li{
  display: inline; //or inline-block
}

Working version here- https://jsfiddle.net/2rovth3a/

Why is my Navbar not displaying inline

Move your h3s inside the a tags and remove all unnecessary classes especially navbar-justified in the ul . The h3s interfere with the li and ul.
Here is the code that worked for me in a code pen

 <div class="list" style="position: absolute; top: 0px; left:0px;">
  <div class="navbar navbar-default">

      <ul class="nav navbar-nav">
        <li><a href="/"><h3>Home</h3></a></li>
        <li><a href="group.html"><h3>Team</h3></a></li>
        <li><a href="services.html"><h3>Krygyzstan</h3></a></li>
        <li><a href="positions.html"><h3>Blog</h3></a></li>
        <li><a href="positions.html"><h3>Expeditions</h3></a></li>
          </ul>
          </div>

  </div>

bootstrap navbar not showing properly

Taking that you are using bootstrap 4, you need to use CDN instead of the local files, its the local files that are causing the problem, its possible the server isn't able to access files outside of the index.html directory. simple fix is to use the bootstrap 4 CDN

Replace

<link href="css/bootstrap.min.css" rel="stylesheet">

with

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>{% block title %}page one {% endblock %}</title>

    <!-- Bootstrap -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">Features</a>
          <a class="nav-item nav-link" href="#">Pricing</a>
          <a class="nav-item nav-link disabled" href="#">Disabled</a>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>  
    
  {% block content %}
  <h1>Hello, world!, page one</h1>
  {% endblock %}
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->

</body>
</html>

Bootstrap 4 navbar not showing navbar items

That's because the navbar-expand-* class is missing in your code.

I've added navbar-expand-md in the code snippet below. This class expands the navbar (from the default collapsed state) on screens that are medium (md) or larger.

If you change that to navbar-expand-lg, the expansion will happen form large (lg) screens onwards etc.

And if you want your navbar items to be expanded permanently i.e. on all screen sizes, use the navbar-expand class.

You also need a toggler in order to open and close the navbar items when the navbar is collapsed. That toggler is currently missing in your code as well.

Click "run code snippet" below and expand to full page for testing:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light bg-faded">

    <a class="navbar-brand" onclick="goBack()">

        <img src="https://placehold.it/30" width="30" height="30" class="d-inline-block align-top" alt="Sample Image">

        Back to Course

    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item active">

                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">Link</a>

            </li>

            <li class="nav-item">

                <a class="nav-link disabled" href="#">Disabled</a>

            </li>

        </ul>

    </div>

</nav>

Related Topics

Get Input Type=Text to Look Like Type=Password

How to Add Background Image for Input Type="Button"

Newline in <Td Title="">

Aligning Elements Left and Center with Flexbox

Internet Explorer 11 Word Wrap Is Not Working

Is There a Disadvantage of Using 'Display:Table-Cell'On Divs

How to Write Equations in HTML

Rounded Corners in Outlook Without Images

It Is Possible to Expand a Textarea Only with CSS

Do HTML5 Script Tag Need Type="Javascript"

How to Disable the Spell Checker on Text Inputs on the Iphone

How to Make Select Elements Shrink to Max-Width Percent Style Within Fieldset

Overlay on HTML5 Fullscreen Video

How to Remove the Top Margin in a Web Page

Html5 Full Screen Video

How to Freeze Header of the Page

Change Checkbox Check Image to Custom Image

Getting Rid of Space with the Superscript in HTML Emails


Leave a reply



Submit