Navbar increase padding left/right

Topic: Navbar increase padding left/right

Florian Preuss free asked 5 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?

Add comment

Florian Preuss free answered 5 years ago

0 0 Best answer

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:

<pre class="prettyprint"><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="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>
</code></pre>

An earlier version of my code can also be found on Github, <a href="https://github.com/ProxieTV/dreitoechter-web" target="_blank" rel="nofollow">https://github.com/ProxieTV/dreitoechter-web</a>
What could be the problem?

Please insert min. 20 characters.

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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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;
  }
}

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

Florian Preuss

35Support score
5Questions 1Answers 0Snippets