Topic: remove dropdown carats on megamenu
How do I remove the drop facing carats on a megamenu
I replaced the text with buttons and 
would like to remove the carats or place them inside the buttons
Question duplicated because when I edit it wants the mdb version but dropdown is empty
would like to remove the carats or place them inside the buttons
Question duplicated because when I edit it wants the mdb version but dropdown is empty
Add comment
Hi,
try this code:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">
<!-- Navbar brand -->
<a class="navbar-brand text-uppercase" href="#">Navbar</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- Features -->
<li class="nav-item dropdown mega-dropdown active">
<a class="nav-link dropdown-toggle text-uppercase btn btn-primary p-2" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Features
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Technology -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase btn btn-primary p-2" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink3">
<div class="row">
<div class="col-md-12 col-xl-4 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/8-col/img%20(37).jpg" class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-md-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- Lifestyle -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle text-uppercase btn btn-primary p-2" id="navbarDropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Lifestyle</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink4">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-4 mb-xl-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Lorem ipsum dolor sit</a>
<p class="font-small text-uppercase white-text">
<i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 17, 2017 / <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 20
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<!--Featured image-->
<a href="#!" class="view overlay z-depth-1 p-0 mb-2">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(44).jpg" class="img-fluid" alt="First sample image">
<div class="mask rgba-white-slight"></div>
</a>
<a class="news-title font-weight-bold pl-0" href="#!">Ut labore et dolore magna</a>
<p class="font-small text-uppercase white-text">
<i class="fa fa-clock-o pr-2" aria-hidden="true"></i>July 16, 2017 / <i class="fa fa-comments-o px-1" aria-hidden="true"></i> 25
</p>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<!-- Links -->
<!-- Search form -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
<!-- Collapsible content -->
</nav>
<!-- Navbar -->
Best,
Marta
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 jQuery
- MDB Version: 4.5.9
- Device: Desktop
- Browser: Chrome / Firefox
- OS: OSX
- Provided sample code: No
- Provided link: No