Topic: Centered navbar links

peterhaiti19 pro asked 2 years ago


How can i horizontally centered navbar links inside navbar-brand and navbar form or login user ?


Arkadiusz Idzikowski staff answered 2 years ago


Here is an example for centered links:

<mdb-navbar
  SideClass="navbar navbar-expand-lg navbar-dark purple lighten-1"
  [containerInside]="false"
>
  <a class="navbar-brand mx-auto" href="#">
    <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt=""
  /></a>

  <div class="collapse navbar-collapse">
    <ul class=" navbar-nav mx-auto">
      <li class="nav-item active">
        <a class="nav-link waves-light" mdbWavesEffect
          >Home<span class="sr-only">(current)</span></a
        >
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Features</a>
      </li>
    </ul>
  </div>
</mdb-navbar>

and centered brand icon:

<mdb-navbar
  SideClass="navbar navbar-expand-lg navbar-dark purple lighten-1"
  [containerInside]="false"
>
  <div class="collapse navbar-collapse">
    <ul class=" navbar-nav">
      <li class="nav-item active">
        <a class="nav-link waves-light" mdbWavesEffect
          >Home<span class="sr-only">(current)</span></a
        >
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Features</a>
      </li>
    </ul>
  </div>

  <a class="navbar-brand mx-auto" href="#">
    <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt=""
  /></a>

  <div class="collapse navbar-collapse">
    <ul class=" navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</mdb-navbar>

Logo on the left and links displayed in center and on the right:

<mdb-navbar
  SideClass="navbar navbar-expand-lg navbar-dark purple lighten-1"
  [containerInside]="false"
>
  <a class="navbar-brand mx-auto" href="#">
    <img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt=""
  /></a>

  <div class="collapse navbar-collapse">
    <ul class=" navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link waves-light" mdbWavesEffect
          >Home<span class="sr-only">(current)</span></a
        >
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Features</a>
      </li>
    </ul>
  </div>

  <div class="collapse navbar-collapse">
    <ul class=" navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link waves-light" mdbWavesEffect
          >Home<span class="sr-only">(current)</span></a
        >
      </li>
      <li class="nav-item">
        <a class="nav-link waves-light" mdbWavesEffect>Features</a>
      </li>
    </ul>
  </div>
</mdb-navbar>

peterhaiti19 pro commented 2 years ago

Thank you for replying Arkadiusz.Here's an exemple of what I want do, ay help please... enter image description here


Arkadiusz Idzikowski staff commented 2 years ago

@peterhaiti19 I edited my answer and added a third example that is similar to the one from your image. You just need to modify the content in the links containers.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: macbook pro
  • Browser: safari and chrome
  • OS: mac oc
  • Provided sample code: No
  • Provided link: No