mdb-navbar fontsize and height


Topic: mdb-navbar fontsize and height

fodxp asked 6 years ago

Hello MDB Support, 

I am using ng-uikit-pro-standard-7.0.0 and following the angular navbar documentation here

https://mdbootstrap.com/docs/angular/navigation/navbar/

I need to 

1. Reduce the height of the navbar to 40px

2. Reduce the font size of the nav-item/nav-link

3. Change the background of the flyout/dropdown menu to match with the navbar background.

I do not see options to set these in the API or the mdb-navbar documentation to do this.  Is the expectation to use a custom stylesheet and over ride the SideClass? Could you provide suggestions on how to customize the navbar, please?

 

Following is the code I am trying out. 

<!--Navbar-->
<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

<!-- Navbar brand -->
<mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>

<!-- Collapsible content -->
<links>

<!-- Links -->
<ul class="navbar-nav mr-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>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
</li>

<!-- Dropdown -->
<li class="nav-item dropdown" dropdown>
<a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
Basic dropdown<span class="caret"></span></a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary" role="menu">
<a class="dropdown-item waves-light" mdbWavesEffect href="#">Action</a>
<a class="dropdown-item waves-light" mdbWavesEffect href="#">Another action</a>
<a class="dropdown-item waves-light" mdbWavesEffect href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item waves-light" mdbWavesEffect href="#">Separated link</a>
</div>
</li>

</ul>
<!-- Links -->

<!-- Search form -->
<form class="form-inline waves-light" mdbWavesEffect>
<div class="md-form mt-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
</div>
</form>
</links>
<!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

Damian Gemza staff answered 6 years ago

Dear fodxp

Please take a look at the below code. What I have changed there?
- Added mt-0 mb-0 classes to the .md-form div,
- added .indigo class to the *dropdownMenu div,
- added .text-white classes to the a.dropdown-item,
- changed the padding of the .navbar class,
- changed the font-size of the .navbar-nav class

Now the whole navbar has 41.5px height.

.scss:

.navbar {
padding: 0 1rem;
}

.navbar-nav {
font-size: 0.8rem;
}

.html:

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
<mdb-navbar-brand>
<a class="navbar-brand" href="#">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt="">
</a>
</mdb-navbar-brand>

<!-- Collapsible content -->
<links>

<!-- Links -->
<ul class="navbar-nav mr-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>
<li class="nav-item">
<a class="nav-link waves-light" mdbWavesEffect>Pricing</a>
</li>

<!-- Dropdown -->
<li class="nav-item dropdown" dropdown>
<a dropdownToggle mdbWavesEffect type="button" class="nav-link dropdown-toggle waves-light" mdbWavesEffect>
Basic dropdown<span class="caret"></span></a>
<div *dropdownMenu class="dropdown-menu dropdown dropdown-primary indigo " role="menu">
<a class="dropdown-item waves-light text-white" mdbWavesEffect href="#">Action</a>
<a class="dropdown-item waves-light text-white" mdbWavesEffect href="#">Another action</a>
<a class="dropdown-item waves-light text-white" mdbWavesEffect href="#">Something else here</a>
<div class="divider dropdown-divider"></div>
<a class="dropdown-item waves-light text-white" mdbWavesEffect href="#">Separated link</a>
</div>
</li>

</ul>
<!-- Links -->

<form class="form-inline">
<div class="md-form mt-0 mb-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
</div>
</form>

</links>
<!-- Collapsible content -->
</mdb-navbar>

Best Regards,

Damian


Damian Gemza staff answered 6 years ago

Dear @fodxp 

About that gap between navbar and dropdown-menu: Please try to add the top: -10px !important style to the .dropdown-menu class, and problem should be fixed.

.dropdown-menu {
top: -10px !important;
}

About changing the size of the dropdown-menu items: Add flag !important to .dropdown-item font-size styles.

.dropdown-item {
font-size: 0.8rem !important;

Best Regards,

Damian


fodxp answered 6 years ago

Hi Damian,

Thanks for the detailed response. This solved most of the issues I outlined. The styling 

.navbar-nav {
font-size: 0.8rem;
}

changed the font size of the top level navbar, but did not change the font size of the dropdown-links. I tried setting the font-size on .nav-item, .dropdown-item, . dropdown-menu and none of them changed the fontsize of the drop-down. See attached image.

.nav-item{
font-size: 0.8rem;
}

.dropdown-item{
font-size: 0.8rem;
}

.dropdown-menu{
font-size: 0.8rem;
}
 
Additionally there is a 20px gap between the dropdown menu and the navbar now. How can I get the dropdown to be flush with the navbar, please? Appreciate your help.
 

fodxp answered 6 years ago

Thanks Damian for the resolution!


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: 6.2.3
  • Device: desktop
  • Browser: chrome
  • OS: OSX
  • Provided sample code: Yes
  • Provided link: No