bootstrap 4 navbar disappears when resizing screen

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!

WebDevBooster · Accepted Answer · 2018-01-18T11:58:54.133

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.

Thanks a lot, I find an example, https://www.codeply.com/go/VeoASOVVSA — Belter, Jan 18 '18 at 12:31

pradeep kumar · Answer 2 · 2019-09-24T05:33:43.693

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))

edited Sep 24 '19 at 05:33

answered Jan 18 '18 at 12:03

pradeep kumar

983
10
21

score -2 · Answer 3 · answered Jan 18 '18 at 12:37

Try this,
I  have updated few classes in your code.

<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="padding: 1px; width: 100%">
    <div class="navbar-inner">
      <div class="container">
        <a class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" style="
    background: black;
">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

        <div class="navbar-collapse collapse" id="abc" aria-expanded="false" style="height: 1px;">
          <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>

bootstrap 4 navbar disappears when resizing screen

3 Answers3