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
ktm1971 () - 5 years ago - Reply 0
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?
Coralà Triana () - 7 years ago - Reply 0
Thanks for the code. How can i make this side bar open in default ?
Arun Roy () - 7 years ago - Reply 0
How can I make this not to push the content when sidebar is show, but instead to overlay on top of the content?
crazymrazy () - 7 years ago - Reply 0
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"
Alex () - 7 years ago - Reply 0
that doesn't work !! i don't understand why i copied the three files !!
hayat () - 7 years ago - Reply 0
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
Mansoor Ahmad () - 7 years ago - Reply 0
Any chance this will port over to BS4? I don't know how to do it XD
Mark Christian Perry () - 7 years ago - Reply 0
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
Bilal Köşker () - 7 years ago - Reply 0
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
Subash pothini () - 7 years ago - Reply 0
how do you make the sidebar disappear when clicking anywhere on the page?
thibaut () - 7 years ago - Reply 0
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.
Um tal de Nuggets () - 7 years ago - Reply 0
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
ruchiccio () - 7 years ago - Reply 0
How can I make, when you clicked an item of the navbar, the navbar will close?
Sn0pY () - 7 years ago - Reply 0
i need this menu in right side how can i do it i need help ?
jenish astound () - 7 years ago - Reply 0
yes is just apply:
right: 0;
and remove:
left: 0;
on ".sidebar-nav li:before" in css.
Thales Nunes () - 7 years ago - Reply 0
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
Thales Nunes () - 7 years ago - Reply 0
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?
Daniele Cascone () - 8 years ago - Reply 0
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.
Chuba () - 8 years ago - Reply 0
Is there an easy way to convert this to come down from the top?
Matthew Stahlmann () - 8 years ago - Reply 0
i have copy all the code php,js,css and included all fils link like css and js ....but still its not working
preet () - 8 years ago - Reply 0
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?
Julie Leurs () - 8 years ago - Reply 0
Hi, this is cool. Is there a way to keep the Menu open by default when the page loads on desktops?
Himanshu Sharma () - 8 years ago - Reply 0
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.
Stuart Starr () - 8 years ago - Reply 0
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.
Bradley Singer () - 8 years ago - Reply 0
Hey great job on this navbar. How can I hide the button? to show only on small screens (mobile).
Afladimir () - 8 years ago - Reply 0
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 :)
Daniel () - 8 years ago - Reply 0
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
amirul () - 8 years ago - Reply 0
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;
}
Benjamin Laible () - 8 years ago - Reply 0
This didn't work for me and the -ms-transition is not recognized by visual studio
Afladimir () - 8 years ago - Reply 0
Hi! The cross seems bad on Firefox, and i don't know why. Can someone help me? Otherwise, you made a really great job!
Neio Wolf () - 9 years ago - Reply 0
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;
}
Benjamin Laible () - 8 years ago - Reply 0
How could add sub ​​-sub -menus with the style you drive
julio vazquez () - 9 years ago - Reply 0
How put a social sidebar under the menu without having the colors ?
and thanks for this menu it's really beautiful !
A Vt () - 9 years ago - Reply 0
How do you add other bootstrap components like buttons below the <ul>? Thanks!
Garrett () - 9 years ago - Reply 0
They float up to the top where the standard bootstrap nav area would be and are hidden behind the brand section.
Garrett () - 9 years ago - Reply 0
Hi !
How to download this, because I've got a install problem (sorry for my english, i'm french)
Apakâ„¢ () - 9 years ago - Reply 0
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!
Cardei Catalin  () - 9 years ago - Reply 0
i just find a problem in you code, the label Works don't work '-'
here a print
http://prntscr.com/6s54y8
Andrey Hartung (Mosufe) () - 9 years ago - Reply 0
i just find the solution, you dont set in the itens of Works the role="menuitem"
Andrey Hartung (Mosufe) () - 9 years ago - Reply 0
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
TheSpitefulOctopus () - 9 years ago - Reply 0
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.
maxsurguy () - 9 years ago - Reply 0
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)
Dilan Quesada () - 9 years ago - Reply 0
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.
Luka () - 9 years ago - Reply 0
in this hamburger button works only once, after we select some other link in that slidebar the hamburger button wont works but it displays
Hemanth MC () - 9 years ago - Reply 0
Hey ,
It Looks Nice....
But i want to set it for different width for different resolution ... can you help me for same
Vikram Awalekar () - 9 years ago - Reply 0
Maridlcrmn, I am looking to add this menu your in a look my site the link http://horabus.com/Consulta...
Help me please.
Breno D'Oliveira () - 9 years ago - Reply 0
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;
}
Maria del Carmen () - 9 years ago - Reply 0
Thanks for the tip. How do I remove the transparency of the items in the dropdownlist?
Breno D'Oliveira () - 9 years ago - Reply 0