Topic: Navbar increase padding left/right
Actually I have a mdb navbar. But now I want to increase the padding of it, I already tried it via css, but it don't worked.
@media (min-width: 992px)
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
What options are there to do that?
Arkadiusz Idzikowski staff answered 5 years ago
You should use only .navbar-expand-lg
selector in this case and set higher padding (because 0.5rem is already used and you won't see a difference). There are also some problems with the syntax of your code, here is a working example:
@media (min-width: 992px) {
.navbar-expand-lg {
padding-right: 5rem;
padding-left: 5rem;
}
}
Preuss answered 5 years ago
Well, tanks for your answer. For me, by adding this to the css file of my navbar, it don't affect anything. My Navbar html code:
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" routerLink="leistungen" mdbWavesEffect>Leistungen</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" routerLink="wohngemeinschaften" mdbWavesEffect>Wohngemeinschaften für Senioren</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" routerLink="about" mdbWavesEffect>Über uns</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link waves-light" routerLink="aktuelles" mdbWavesEffect>Aktuelles</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item" (click)="openContact()">
<a class="nav-link">
<mdb-icon fas icon="envelope"></mdb-icon>Kontakt</a>
</li>
<li class="nav-item" (click)="openContact()">
<a class="nav-link">
<mdb-icon fas icon="align-justify"></mdb-icon>Impressum</a>
</li>
</ul>
An earlier version of my code can also be found on Github, https://github.com/ProxieTV/dreitoechter-web What could be the problem?
Arkadiusz Idzikowski staff commented 5 years ago
Where did you add the styles I provided in the previous post? It should work correctly when the styles are in global styles.scss
file.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.5.0
- Device: Mac Book Air
- Browser: Safari
- OS: Mac OS X
- Provided sample code: No
- Provided link: No