_nK supports this item


This author's response time can be up to 1 business day.

11 comments found.

nice, you know what would be a nice feature, if we start with standard bootstrap top navigation and for tablet and mobile it is the slide in menu like this

Hi, nokiko.
You mean on a devices menu should be hidden automatically and only called on press button?
I forgot to include this feature … and remembered only after released for sale. Next update will include this feature.

Best regards, nK.

thats a good feature as well but what I meant was have it as a standard bootstrap topmenu and only for mobile nad tablet have it be the side menu

I think it’s just as an extension of the standard navbar. Maybe it’s convenient, but this plugin will not change the behavior of a standard navbar.

Hi, just tinkering with this, when I click the icon to open/close the side bar instead it refreshes the page. https://jenolan.org

Any hints?

Thanks, Larry

Hi, Jenolan.

Your logo (.navbar-brand) covers sidebar toggle button.
You can place toggle button after brand, ex:

<a class="navbar-brand navbar-brand-top" href="/"><img src="/assets/img/logo/logo32.png" alt="Home Page">Jenolan's CESS</a>
<button class="btn btn-default navbar-btn yay-toggle" type="button" style=" 
"><i class="fa fa-bars"></i></button>

Best regards, nK.

yup that’s it … pesky ordering of things ;)

Hi Thanks for your side bar.1.Where is SASS file? 2.How can I set effects?

About what effects do you say? There are submenu show/hide effects and menu show/hide.

This effect you can create by using a third-party plugin or write your own handler on jquery. It is not part of the sidebar.

Hi, I like your advanced sidebar, good work! I have an error with yay-push on my Samsung Note 4 Lollipop Android (Chrome browser). If activated, when I swipe to see the menu, it opens, but when swiping back, the menu doesn’t close, the page simply moves around and the taskbar is too long for the screen, the toggle buttons do not appear together anymore on the screen. The push behavior is best for my website, I don’t like to shrink things when opening the side menu, and the overlay has problems if seen on laptops (the main text from teh page goes under the menu). Can you find a solution to the yay-push problem? Thanks!

Hi, bazzakoni.
Thank you for info. As soon as i fix it, Yay will be updated.

Best regards, nK.

Does this require Bootstrap to work or can it be used with other frameworks?

Hi, ubhape2.

Sidebar will work without bootstrap, but there may be minor issues in styles.

Best regards, nK.

Great. Thank You!

Great sidebar! I would love to have different badge colors, not just blue. How can it be added?

<a href="#"><i class="fa bell" /> Alerts <span class="badge badge-alert">7</span></a>
<a href="#"><i class="fa fa-envelope-o" /> Messages <span class="badge">10</span></a>
Use code like this (makes red badge for .badge-alert classname)
.yaybar .nano-content > ul li > a > .badge.badge-alert {
  background-color: red;

Perfect, thank you.

Have some problem with class content wrap. When there is no content on content-wrap , and sidebar is close , the background is white.

Hi, paanblogger.

You can fix it with this custom styles:

html {
   height: 100%;
body {
   min-height: 100%;

Best regards, nK.

Hi _nK,

I try to use this sidebar without your default topbar. Thats work, but, when i hide sidebar with “yay-hide-to-small” class i got a small blank space on top. Probably because .label class is hide.

Can u help me to fix this?

Ps.: Good work! The script is very good :)

Sorry! I fix this. A little conflict with my css code. :D

Hi, msilvabr.
Well done! :)

Hi _nk

How can I execute toggle from a custom function. Or bind to keypress event?

Thanks in advanced..!

Answered in ticket system.

Thank you _nK..!

Does this sidebar work with Bootstrap 4+?

Yes, it will work.

Excellent job ;)