Topic: Make horizontal menu static
mark goldin asked 5 years ago
My top horizontal menu will have just a few items and I dont it go responsive when I resize the Browser. How can I do it?
Thanks
mark goldin answered 5 years ago
Here is modified version of navigation component:
<!--Main Navigation-->
<!-- Navbar brand -->
<logo class="ml-3">
<a class="navbar-brand" href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/">
<strong class="blue-text">MDB</strong>
</a>
</logo>
<!-- Collapsible content -->
<links>
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" mdbWavesEffect>Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/" target="_blank" mdbWavesEffect>About MDB</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/angular/getting-started/" target="_blank" mdbWavesEffect>Free download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://mdbootstrap.com/angular/angular-tutorial/" target="_blank" mdbWavesEffect>Free tutorials</a>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a href="https://www.facebook.com/mdbootstrap" class="nav-link" target="_blank" mdbWavesEffect>
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank" mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
</li>
<li class="nav-item">
<a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light"
target="_blank" mdbWavesEffect>
<mdb-icon fab icon="github" class="mr-2"></mdb-icon>MDB GitHub
</a>
</li>
<li class="nav-item">
<a href="https://mdbootstrap.com/products/angular-ui-kit/" class="ml-1 nav-link border border-light rounded" mdbWavesEffect>
<mdb-icon far icon="gem" class=" left"></mdb-icon> Go Pro</a>
</li>
</ul>
</links>
<!-- Collapsible content -->
</mdb-navbar>
<!--/.Navbar-->
and it looks like this when collapsed:
Bartosz Termena staff commented 5 years ago
Hi! Thank you for reporting the problem. We'll take a closer look at that.
Best Regards, Bartosz.
Bartosz Termena staff answered 5 years ago
Just to be sure - you don't want to collapse the navbar by a breakpoint? If so try this:
<mdb-navbar
style="width:100%"
[containerInside]="false"
SideClass="navbar navbar-expand navbar-dark bg-primary"
>
<mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>
<ul class="navbar-nav mr-auto" style="width:100%">
<li class="nav-item active">
<a class="nav-link" mdbWavesEffect
>Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/"
target="_blank"
mdbWavesEffect
>About MDB</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="https://mdbootstrap.com/angular/getting-started/"
target="_blank"
mdbWavesEffect
>Free download</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="https://mdbootstrap.com/angular/angular-tutorial/"
target="_blank"
mdbWavesEffect
>Free tutorials</a
>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a
href="https://www.facebook.com/mdbootstrap"
class="nav-link"
target="_blank"
mdbWavesEffect
>
<mdb-icon fab icon="facebook-f"></mdb-icon>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank" mdbWavesEffect>
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
</li>
<li class="nav-item">
<a
href="https://github.com/mdbootstrap/bootstrap-material-design"
class="nav-link border border-light"
target="_blank"
mdbWavesEffect
>
<mdb-icon fab icon="github" class="mr-2"></mdb-icon>MDB GitHub
</a>
</li>
<li class="nav-item">
<a
href="https://mdbootstrap.com/products/angular-ui-kit/"
class="ml-1 nav-link border border-light rounded"
mdbWavesEffect
>
<mdb-icon far icon="gem" class=" left"></mdb-icon> Go Pro</a
>
</li>
</ul>
</mdb-navbar>
Hope it helps! Best Regards, Bartosz.
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: 8.4.0
- Device: PC
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 5 years ago
Hi!
Please show me your code, so that I can reproduce your problem.
Best, Bartosz.