Topic: Tabs fixed on top with hidden SideNav
Hello,
Please,
I need an example with TABS, similar to "Double Navigation with hidden SideNav & fixed Navbar", but with TABS (with "active" background).
Thanks
Hi,
Thanks for your reply.
Let me try another aproach:
Using “Double Navigation with hidden SideNav & fixed Navbar” example, is it possible to mark an item as active ?
I've tried this with "<li class="nav-item active">", but background-color is not changing....
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: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Piotr Glejzer staff commented 6 years ago
HI, We don't have that exmaple what do you expect. We are very sorry about that. But can you try this? <body class="hidden-sn mdb-skin"> <!--Double navigation--> <header> <!-- Sidebar navigation --> <div id="slide-out" class="side-nav sn-bg-4"> <ul class="custom-scrollbar"> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"> <img src="<a href="https://mdbootstrap.com/img/logo/mdb-transparent.png"" rel="nofollow">https://mdbootstrap.com/img/logo/mdb-transparent.png"</a>; class="img-fluid flex-center"> </a> </div> </li> <!--/. Logo --> <!--Social--> <li> <ul class="social"> <li> <a href="#" class="icons-sm fb-ic"> <i class="fa fa-facebook"> </i> </a> </li> <li> <a href="#" class="icons-sm pin-ic"> <i class="fa fa-pinterest"> </i> </a> </li> <li> <a href="#" class="icons-sm gplus-ic"> <i class="fa fa-google-plus"> </i> </a> </li> <li> <a href="#" class="icons-sm tw-ic"> <i class="fa fa-twitter"> </i> </a> </li> </ul> </li> <!--/Social--> <!--Search Form--> <li> <form class="search-form" role="search"> <div class="form-group md-form mt-0 pt-1 waves-light"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-chevron-right"></i> Submit blog <i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect">Submit listing</a> </li> <li> <a href="#" class="waves-effect">Registration form</a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-hand-pointer-o"></i> Instruction <i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect">For bloggers</a> </li> <li> <a href="#" class="waves-effect">For authors</a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-eye"></i> About <i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect">Introduction</a> </li> <li> <a href="#" class="waves-effect">Monthly meetings</a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-envelope-o"></i> Contact me <i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect">FAQ</a> </li> <li> <a href="#" class="waves-effect">Write a message</a> </li> <li> <a href="#" class="waves-effect">FAQ</a> </li> <li> <a href="#" class="waves-effect">Write a message</a> </li> <li> <a href="#" class="waves-effect">FAQ</a> </li> <li> <a href="#" class="waves-effect">Write a message</a> </li> <li> <a href="#" class="waves-effect">FAQ</a> </li> <li> <a href="#" class="waves-effect">Write a message</a> </li> </ul> </div> </li> </ul> </li> <!--/. Side navigation links --> </ul> <div class="sidenav-bg mask-strong"></div> </div> <!--/. Sidebar navigation --> <!-- Navbar --> <nav class="nav navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"> <!-- SideNav slide-out button --> <div class="float-left"> <a href="#" data-activates="slide-out" class="button-collapse"> <i class="fa fa-bars"></i> </a> </div> <!-- Breadcrumb--> <div class="breadcrumb-dn mr-auto"> <p>Material Design for Bootstrap</p> </div> <div class="d-flex justify-content-center"> <ul class="nav nav-tabs md-tabs nav-justified indigo" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">Profile</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Follow</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Contact</a> </li> </ul> </div> </nav> <!-- /.Navbar --> </header> <!--/.Double navigation--> <!--Main Layout--> <main> <div class="container-fluid mt-5"> <div style="height: 2000px"> <!-- Tab panels --> <div class="tab-content card"> <!--Panel 1--> <div class="tab-pane fade in show active" id="panel1" role="tabpanel"> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </div> <!--/.Panel 1--> <!--Panel 2--> <div class="tab-pane fade" id="panel2" role="tabpanel"> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </div> <!--/.Panel 2--> <!--Panel 3--> <div class="tab-pane fade" id="panel3" role="tabpanel"> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p> </div> <!--/.Panel 3--> </div> </div> </div> </main> <!--Main Layout--> </body> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <script> // SideNav Button Initialization $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); </script> </body> Best, Piotr