bootstrap 4 navbar disappears when resizing screen [duplicate]

Question

I use angular 2 and bootstrap 4, There is a navbar on the home page, but when I narrow the page to smaller than 1000px, the text of navbar disappeared.

Here is my code:

 <nav class="navbar navbar-expand-lg navbar-dark bg-info" style="padding: 1px; width: 100%">
    <!-- <a class="navbar-brand" routerLink='/index' style="padding-right: 5px">
    </a> -->
    <div class="navbar-inner">
      <div class="container">

        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
        <!-- Be sure to leave the brand out there if you want it shown -->
        <!-- <a class="brand" href="#">Project name</a> -->

        <div class="collapse navbar-collapse" >
          <div class="navbar-nav mr-auto" id="navbarNavAltMarkup">
            <a class="nav-link navLink" routerLink="/index" routerLinkActive="active"><h5>Introduction</h5></a>
            <a class="nav-link navLink" routerLink="/analysis" routerLinkActive="active"><h5>Analysis</h5></a>
            <a class="nav-link navLink" routerLink="/help" routerLinkActive="active"><h5>Help</h5></a>
            <a class="nav-link navLink" routerLink="/faq" routerLinkActive="active"><h5>FAQs</h5></a>
            <a class="nav-link navLink" routerLink="/demo" routerLinkActive="active"><h5>Demo</h5></a>
            <a class="nav-link navLink" href="http://www.zhulab.cn" routerLinkActive="active"><h5>ZhuLab</h5></a>
          </div>
        </div>
      </div>
    </div>
  </nav>

You can see it from https://angular-ymfn5q.stackblitz.io/,

here is the code: https://stackblitz.com/edit/angular-ymfn5q?file=app%2Fapp.component.html

I have tried this method, bootstrap collapse menu disappears when resizing screen, but it seems not work for me.

I want something like this: https://jsfiddle.net/65KdX/1/

Anyone can give me a help, thanks a lot!

Answer 1

Of course it will disappear. The navbar-expand-lg class tells it to disappear on screens that are smaller than lg. And you don't have the navbar toggler anywhere. It's all expected behavior.

Take a look at the structure of a working navbar here:

https://getbootstrap.com/docs/4.0/components/navbar/

The navbar-toggler thingy is what appears when the navbar-expand-* class lets things disappear.

And the collapse navbar-collapse classes tell the toggler where those disappeared things are hiding. (I'm using a bit a loose terminology here)

Be careful with the container-fluid class though. Because that sucker is gonna stretch your navbar across the entire screen and people with 4K wide sceens are gonna hate you for that. Use container instead.

Answer 2

You have used navbar-expand-lg class which means it will expands the navbar when the screen matched lg width until it will be collapsed.

You can use navbar-expand as you need (i.e navbar-expand (-sm|-md|-lg|-xl))