Topic: Navbar css
A few comments/suggestions on the navbar. Please see https://material.io/guidelines/style/typography.html#typography-styles
- Currently you have the font weight set at 300 however the google design guidelines have it at 400 (You also have the body font weight at 300 where guidelines have 400).
- I would like to use the style of the dropdown in the navbar (which is the material design standard) however I cant seem to make it work. I have html of:
<li class="nav-item dropdown d-flex d-xl-none">
<a class="nav-link dropdown-toggle" href="#" id="viewMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class='fa fa-search'></i> VIEW
</a>
<div class="dropdown-menu" aria-labelledby="viewMenu">
<a href="/notifications" class="dropdown-item">Notifications</a>
<a href="/projects" class="dropdown-item">Projects</a>
</div>
</li>
This creates the hover affect which I want to avoid. If I change the <li> class to dropdown-defaultthe width of the dropdown goes way too wide?Any suggestions for getting the dropdown appearancein the navbar would be appreciated.
Add comment
Hi,
- yes, we have font weight 300 on purpose.
- you don't want to have waves effect on the dropdown button, yes? So you have to go to mdb.js file in your MDB pack, find this line of code:
Waves.attach('.navbar-nav a:not(.navbar-brand), .nav-icons li a, .navbar form, .nav-tabs .nav-item', ['waves-light']);and remove or comment this line, then save. After that, you need to minify mdb.js to mdb.min.js with your changes because in HTML file you have the script like this:<script type="text/javascript" src="js/mdb.min.js"></script>.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No