Topic: Navbar Menu not full width

ianfmc free asked 5 years ago


*Expected behavior*Full width

*Actual behavior*1/3 width

Screenshot 1

Resources (screenshots, code snippets etc.)

   <div class="container">
      <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <a class="navbar-brand" routerLink="/main">Compass <i class="far fa-compass"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
          aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link" routerLink="/main/fleet">Fleet</a>
            <a class="nav-item nav-link" routerLink="/main/financial">Financials</a>
            <a class="nav-item nav-link" routerLink="/main/reservations">Reservations</a>
            <a class="nav-item nav-link" routerLink="/">Logout</a>
          </div>
        </div>
      </nav>
    </div>

ianfmc free answered 5 years ago


You are right, Arkadiusz! I forgot to post the updated code (after I tried the normal bootstrap stuff). Here is the updated (mdb-based) code. Same result. For some reason, this navbar thinks the entire width of the screen is about 1200 px. So, if I open my Developer Tools, it collapses. Something is overriding this, but I'm not sure how to troubleshoot the CSS :/

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-xl navbar-dark black">

  <!-- Navbar brand -->
  <mdb-navbar-brand><a class="navbar-brand" href="">Companss</a></mdb-navbar-brand>

  <!-- Collapsible content -->
  <links>

    <!-- Links -->
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-item nav-link" routerLink="/main/fleet">Fleet</a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link" routerLink="/main/financial">Financials</a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link" routerLink="/main/reservations">Reservations</a>
      </li>
      <li class="nav-item">
        <a class="nav-item nav-link pull-right" routerLink="/">Logout</a>
      </li>
    </ul>
    <!-- Links -->
  </links>
  <!-- Collapsible content -->
</mdb-navbar>

Arkadiusz Idzikowski staff commented 5 years ago

It looks like there are some conflicts in the styles in your project. If it's possible please send a demo project to a.idzikowski@mdbootstrap.com and we will help you to investigate the problem.

You can also try to use the navbar component in new project to check if the problem is caused by some external styles.


ianfmc free commented 5 years ago

Sent you an email.

Will try to new project and report back


Arkadiusz Idzikowski staff commented 5 years ago

Thank you for sending the demo. I downloaded the app, but I couldn't find any mdb-navbar component in the projects code.


Arkadiusz Idzikowski staff answered 5 years ago


This code doesn't look like MDB Angular. Please take a look at our documentation for navbars:

https://mdbootstrap.com/docs/angular/navigation/navbar/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.3.0
  • Device: Mac OS
  • Browser: Chrome
  • OS: Mojave
  • Provided sample code: No
  • Provided link: Yes