Topic: mdb-navbar fontsize and height
fodxp free asked 5 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 5 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 5 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 free answered 5 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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: 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