navbar positioning elements


Topic: navbar positioning elements

Weiser pro asked 7 years ago

Hi,

in MDB you're using <links></links> to show content in navbar.

the problem is: using one <links> takes up entire width of navbar, two 50%, three 33%...

how do i achieve, that a <links> just take up the width of their children?

adding display: inline block to links component isn't working.

I want the search bar to take the maximum space in between.

 

Screenshot:

https://imgur.com/1wyzOcZ

as you can see, every <links> is 415,46px wide (burger button & heading left, searchbar middle, navigation links right)

if you shrink the view, you get following result:

https://imgur.com/SXkddNT

 

HTML:

<mdb-navbarSideClass="navbar navbar-expand-md fixed-top double-nav" [containerInside]="false">

<links>

<!-- SideNav slide-out button -->

<div>

<a (click)="sidenav.show()"class="button-collapse">

<i class="fa fa-bars"></i>

</a>

</div>

<logo>

<a class="navbar-brand ml-2 clearfix d-none d-md-inline-block font-weight-bold"style="font-size: 18px"href="#">Big Cloud Catalog</a>

</logo>

<!--/. SideNav slide-out button -->

</links>

<links>

<divclass="input-group navSearchbar">

<inputtype="text"placeholder=" Wonach suchen Sie?"class="noBorder"aria-describedby="basic-addon1">

<aclass="input-group-addon bg-yellow"id="basic-addon1">

<iclass="fa fa-search black-text"></i>

</a>

</div>

</links>

<links>

<ul class="nav navbar-nav nav-flex-icons ml-auto">

<li class="nav-item dropdown btn-group clearfix d-none d-md-inline-block"dropdown>

<adropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>

<i class="fa fa-globe"></i> DE

</a>

<div class="dropdown-menu dropdown-primary dropdown-menu-right"role="menu">

<a class="dropdown-item"href="#">Deutsch - DE</a>

<a class="dropdown-item"href="#">English - EN</a>

<a class="dropdown-item"href="#">Français - FR</a>

<a class="dropdown-item"href="#">Italiano - IT</a>

</div>

</li>

<li class="nav-item clearfix d-none d-md-inline-block">

<a class="nav-link waves-light"mdbRippleRadius>

<i class="fa fa-user-circle-o"></i>

<span class="clearfix d-none d-sm-inline-block">Mein Konto</span>

</a>

</li>

<li class="nav-item dropdown btn-group clearfix d-none d-md-inline-block"dropdown>

<a dropdownToggletype="button"class="nav-link dropdown-toggle waves-light"mdbRippleRadius>

<i class="fa fa-list"></i>

<span class="clearfix d-none d-sm-inline-block">Listen</span>

</a>

<div class="dropdown-menu dropdown-primary dropdown-menu-right"role="menu">

<a class="dropdown-item"href="#">Liste 1</a>

<a class="dropdown-item"href="#">Liste 2</a>

</div>

</li>

<li class="nav-item">

<a class="nav-link waves-light"mdbRippleRadius>

<i class="fa fa-shopping-cart"></i>

<span class="badge red">5</span>

</a>

</li>

</ul>

</links>

</mdb-navbar>

<!--/. Navbar -->

Damian Gemza staff answered 7 years ago

Hello Weiser, For now, if you want to change width of <links> elements, you have to add to it some classes, and style that class by self. We're working on that. In release we'll try to fix this. Best Regards, Damian  
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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes