sticky-top navbar and full page intro don't combine wel

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: sticky-top navbar and full page intro don't combine well

nextstepmedia pro asked 6 years ago

Dear people of MDBootstrap, I really like the sticky-top functionality of the navbar. So I want this implemented together with the full-height intro as shown in the following example: https://mdbootstrap.com/previews/docs/latest/html/navigation/intro-fixed-transparent.html. I want exactly the behavior illustrated in the above example only with the sticky-top applied to the navbar instead of fixed-top. I tried doing just this but the full-height background is now bigger as my page is because of the navbar also populating the page. Is there some sort of workaround or class I need to apply? Code: <html class="full-height"> <body> <header>     <!-- Sidebar navigation -->     <div id="slide-out" class="side-nav sn-bg-5">       <ul class="custom-scrollbar">         <!--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="navbar sticky-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav ">       <div class="container">         <!-- Breadcrumb-->           <?= $this->element('Layout/logo')?>         <ul class="nav navbar-nav nav-flex-icons ml-auto">             <?= $this->element('Layout/components/user-panel')?>             <divclass="float-right">                <ahref="#"data-activates="slide-out"class="button-collapse"><iclass="fa fa-bars"></i></a>             </div>           <!-- SideNav slide-out button -->         </ul>       </div>     </nav>     <!-- /.Navbar -->  <div class="view intro-2" style=""> <divclass="full-bg-img"> <divclass="mask rgba-purple-light flex-center"> <divclass="container text-center white-text wow fadeInUp"> <h2>This Navbar is fixed and transparent</h2> <br> <h5>It will always stay visible on the top, even when you scroll down</h5> <p>Navbar's background will switch from transparent to solid color while scrolling down</p> <br> <p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p> </div> </div> </div> </div>   </header> </body> </html>

Ollie Vincent pro answered 6 years ago

Hi, I suggest you used Fixed Navbar with the class .fixed-top to fix the navbar over the background image. In the end it should still give the same effect. Please let me know if you need any help implementing this, or if I understood completely wrong! Thanks

nextstepmedia pro commented 6 years ago

Hey Ollie thx for your response, If I use a fixed-top navbar. The nav will be on top of the image aswell as on top of the content. If I choose this option I will need to add: body { padding-top: 100px;} to get it to work properly. Right? Which forces me to keep the navbar exactly the same height at all times.

Ollie Vincent pro commented 6 years ago

Hi nextstepmedia, If you add padding to the body then that will shift the background image down which means you are back to the original problem. I see from your code that the navbar is transparent anyway - and I would try using these two classes: .fixed-top .scrolling-navbar .scrolling-navbar will toggle a second class that you can style individually. Thanks

Piotr Glejzer staff answered 6 years ago

Hello, Your answer is this. ( I think so). 
    .sticky-top{
      background: red;
    }

or 
    .sticky-top{
      position: fixed;
    }
That's an example of course. Sticky-top is a bootstrap class and it is sticky not fixed. So it generates space between nav and header. Position fixed is fixed, it always on top and all page is under it. Is that resolve your problem? Best, Piotr

Ollie Vincent pro commented 6 years ago

Hi Piotr, I thought you had a fixed-top class for navbars?

nextstepmedia pro commented 6 years ago

Yes thats true

Piotr Glejzer staff commented 6 years ago

Yes I had it, but I changed it for sticky and I tried to resolve that problem. But use fixed-top is good idea too! Have a nice day!

COTIGA answered 6 years ago

Keep sticky-top and delete <header> surrounding the Navbar (work for me)

Piotr Glejzer staff commented 6 years ago

Thank you for the information!
Write
Create snippet
Please insert min. 20 characters.

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
About author
nextstepmedia
Pro User
77Support score
4Questions 4Answers
0Snippets likes 0Snippets