I've almost got this to work but I'm struggling with the background hover colour on the burger menu - its supposed to change colour to correspond with the menu title colour but mine is just white. Can anyone help to fix this please?

Example: http://www.matthewsfrance.co.uk/burgermenutest.html

please update to boostrap v4.2.1. thx.

PROBLEM! PLEASE HELP!!!
If you add more text to the body content and scroll the page up, all teh text go up beyond the X, that's not supossed to happend... how I fix this?

Thank you, works perfectly

Thanks for the code. How can i make this side bar open in default ?

How can I make this not to push the content when sidebar is show, but instead to overlay on top of the content?

I like it and i thank you for the sharing

Could you tell me how i get the text "Menu" under the "hamburger-icons" and the "x"

that doesn't work !! i don't understand why i copied the three files !!

It will work with old bootstrap version(3.3.0) . You will still find some errors.
my advice for u is to take some idea from the current code and design ur own with latest bootstrap

Any chance this will port over to BS4? I don't know how to do it XD

You can use http://upgrade-bootstrap.bo... to convert to BS4

add
css
#wrapper.animating #page-content-wrapper {
position: absolute;
}
edit js
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
$('#wrapper').addClass('animating').delay(500).queue(function(){
$(this).removeClass("animating").dequeue();
});
});

for full width wrapper while closing sidebar

THis fancy bar page content wrapper is moving in mobiles and ipad. Is there any way we position the right side content from moving in mobile

how do you make the sidebar disappear when clicking anywhere on the page?

hii... can u help me how to download this code

Hey, i want to know why im having problem with Google Chrome
http://craftsys.com.br/temp... If i set it to mobile then will open the sidebar, in firefox it works well but in chrome i dont know why that sidebar error occours.

To make the sidebar move to the right side of the page you need to overwrite Bootstrap's class:
Add .navbar-fixed-top {right:0}

Right now it's left:0

How can I make, when you clicked an item of the navbar, the navbar will close?

http://stackoverflow.com/a/...

i need this menu in right side how can i do it i need help ?

any solution?

yes is just apply:
right: 0;
and remove:
left: 0;
on ".sidebar-nav li:before" in css.

and... (almost forgot)
on " #sidebar-wrapper" change
left: 100vw
and in "#wrapper.toggled #sidebar-wrapper" chooose the size of the sidebar changing the left attribute

This is effing genius, thanks!

How Can i convert it with fixed Top nav bar ??

hi
I'm using it and seem to work very fine. But I'd like to start viewing the menu with a the dropdown section opened. If I set the class to "dropdown-open open" I don't know why but the open class disappear at run time!
Could u help me?

amazingly cool............thanx a lot

can u help me, i want to make the div not being block if i open the sidebar. i have been try to edit the source but still i cant do it.

wich library did u used ? about js & css?

Is there an easy way to convert this to come down from the top?

i have copy all the code php,js,css and included all fils link like css and js ....but still its not working

i copy the code save in .html .css .js only open the hamburger if you hover :-) but i can't see the navigation. who can help me with this problem?

Hi, this is cool. Is there a way to keep the Menu open by default when the page loads on desktops?

This is great. I have been trying for an hour to make this work on the right side and just cannot get it to happen. So weird. Trying reversing everything and it refuses to accommodate.

For anyone who finds this post with the same question, I just finished making this work on the right side.

In CSS, replace all "left"s with "right" except for the very last one in the overlay class. This makes everything go from the right wall inward rather than the left wall inward. Next, go to the "hamburger" class right after the big "Hamburger-Cross" heading and put in "right: 0;". This will make the starting position of your hamburger icon on the right side.

I'm not sure about the color highlights because I ended up removing them for my implementation, but that should be the gist of it.

Hey great job on this navbar. How can I hide the button? to show only on small screens (mobile).

First thanks for the menu , very good , I'm already making my adjustments. I wanted to make when I click on the desired menu he close the menu back to my normal page. wait :)

i copy the code save in .html .css .js but not function.. who can help me ? how i can get a full code include js

Concerning the Firefox problem, it's linked to the .hamburger CSS classes: the transform and transition properties are only notified for webkit based browsers. If you add systematically the -moz-, -o-, -ms- and standard property, it also works for Firefox. Example:

.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}

This didn't work for me and the -ms-transition is not recognized by visual studio

Hi! The cross seems bad on Firefox, and i don't know why. Can someone help me? Otherwise, you made a really great job!

Concerning the Firefox problem, it's linked to the .hamburger CSS classes: the transform and transition properties are only notified for webkit based browsers. If you add systematically the -moz-, -o-, -ms- and standard property, it also works on Firefox. Example:

.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}

How could add sub ​​-sub -menus with the style you drive

How put a social sidebar under the menu without having the colors ?
and thanks for this menu it's really beautiful !

How can i position the sidebar navigation at the right.. ?

when you press the link inside dropdown, this is closed!

doesnt work properly in firefox you get a line instead of the x

how to add a top nav if i add it your side bar doesnt work

ie8 don't support. Do you have any idea ?

Nice work.

lovely ~

How do you add other bootstrap components like buttons below the <ul>? Thanks!

What happens when you just add them there?

They float up to the top where the standard bootstrap nav area would be and are hidden behind the brand section.

Hi !
How to download this, because I've got a install problem (sorry for my english, i'm french)

Hi!
I would like to add other stuff to the sidebar not only the navigation.
I don't know how to do it. Maybe you can make a small update to this to be able to add other stuff too.
Thanks!

i just find a problem in you code, the label Works don't work '-'
here a print
http://prntscr.com/6s54y8

i just find the solution, you dont set in the itens of Works the role="menuitem"

Just thank you <3

How to make it slide from right?

thank you, how can i have right slidebar?

is anybody having problems with the js code working?i got about 25 JSLint problems
(keep in mind im extremely new to javascript and would rather just say i dont know it

No, I don't have any JS problems. The errors that JS lint complains about is mainly tabs and undefined jQuery in this case. jQuery is undefined because it is loaded from a different file so JS Lint doesn't know about it.

I need help... i want to add a "Title" next to the botton (the action-botton), or add the botton into a menu or... place it wheres the "brand" is located(imagine the bootstrap default menu)... Thanks in advance (sorry for my english)

How can i stop "hamburger is-closed" to be fixed on top and to become static

Dont wanna that the three lines (hamb-top,hamb-middle,hamb-bottom) follow me when i scroll down

Sry for my bad english i hope you understand it.

in this hamburger button works only once, after we select some other link in that slidebar the hamburger button wont works but it displays

Hey ,

It Looks Nice....

But i want to set it for different width for different resolution ... can you help me for same

Maridlcrmn, I am looking to add this menu your in a look my site the link http://horabus.com/Consulta...
Help me please.

hi Breno, you only have to add this class="item-nav" to each <select> and in your CSS you have to put this:

.sidebar-nav .item-nav {
background: transparent;
color: #fff;
border: 0;
height: 42px;
padding: 10px;
width: 100%;
max-width: 100%;
overflow: hidden;
cursor: pointer;
}

Thanks for the tip. How do I remove the transparency of the items in the dropdownlist?

great sidebar folks!

I am in Love with you Maridlcrmn...

hey it seems okay. you made a nice job. thanks for sharing it

nice side navbar thumbsUp by Mirchu Team