Navbar Menu not full width

Topic: Navbar Menu not full width

ianfmc free asked 5 years ago

*Expected behavior*Full width

*Actual behavior*1/3 width

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>

Add comment

ianfmc free answered 5 years ago

0 0 Best answer

<p>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. <strong>For some reason, this navbar thinks the entire width of the screen is about 1200 px.</strong> So, if I open my Developer Tools, it collapses. Something is overriding this, but I'm not sure how to troubleshoot the CSS :/</p>

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

<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>
  
</mdb-navbar>
</code></pre>

Please insert min. 20 characters.

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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago