Topic: Navbar Menu not full width
*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>
This code doesn't look like MDB Angular. Please take a look at our documentation for navbars:
https://mdbootstrap.com/docs/angular/navigation/navbar/
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 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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