Navigation bar not fixed on the top of the page.

Hi!

I want a navigation bar to be the same for all my pages, therefore I included it in the master. The problem is that the navbar never shows on the top of the page but always at the bottom. The funny thing is that if I include it in each page works properly. Can't figure out what is wrong.

This is my master.blade:

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="{{asset('css/style.css')}}" rel="stylesheet"/>

        <title>TCC - @yield('title')</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    </head>

    <body>
        <div id="nav-placeholder">
            @include('partials/navbar')
        </div>
            @yield('content')
    </body>

</html>

This is the navigation bar:


<nav class="navbar fixed-top navbar-inverse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Urls</a></li>
      <li><a href="#">Urls Contents</a></li>
    </ul>
</nav>

This is the beginning of one of my pages:

@extends('layouts.master')

@section('title', 'Projects')

@section('content')

    <div class="container">
        <h3 class="jumbotron">Create here your project</h3>

        <form method="post" id="projectform" class="w3-container w3-light-grey" action={{action('ProjectsController@create')}} enctype="multipart/form-data">
        {{csrf_field()}}
            <p>
            <label>Project Name</label>
            <input class="w3-input w3-border w3-round" name="name" type="text"></p>
            <p>
            <label>Project Description</label>
            <input class="w3-input w3-border w3-round" name="description" type="text"></p>

        <button type="submit" class="btn btn-primary" style="margin-top:10px">Create Project</button>
        </form>

rory

7 years ago

Level 1

ok I finally got it! I had to use <nav class="navbar navbar-inverse navbar-fixed-top">

Please or to participate in this conversation.