Topic: Navbar increase padding left/right

Florian Preuss free asked 3 years ago


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?


Florian Preuss free answered 3 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 3 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.


Arkadiusz Idzikowski staff answered 3 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;
  }
}


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • 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