Hi, thanks for this wonderful navigation, extremely useful.

Is there any reason I can't apply the pure-container class to the body of the page?

Thanks

Looks great on Chrome, but in Firefox, one slash of the 'X' to close the toggle vanishes.

Hey, this is a great and very elegant solution. I'm having a little problem though - as per the title, I'd like to have the drawers in different parent divs.

I actually have it working with everything in the same div, but it's not an ideal set up. To get the toggles where and how I want them to be, I've had to use some pretty ugly code and they're still not perfectly how I'd like them.

With the toggles in the different parent divs, the layout is exactly as I want it, but of course the toggles for each drawer are still visible when the other drawer is active.

I think this is because it all operates on the ~ selector, which makes me think nothing can be done about this, but I thought I'd ask.

Cheers

Hi Thomas,
First, thank's for this great great job and sharing.
I use the "scaleRotate" effect (left), but when i click on a link, the nav element don't close. (It's closed only with a click on the page, or on toggler.)
How to get this?
Thank's for your answer.

The value of the right CSS property compiles as 56/2px

May I suggest to use something like these values on the following properties instead:
left: 100%;
-webkit-transform: translateX(-110%);
transform: translateX(-110%);

Can you create a hierarchical Menu with the drawers?

Wondering how I can easily resize the menu icon and the 'close icon'?

I see in the source code how I might change the size of the circle around the icons, but not the icons themselves.

This is a really nice looking drawer/menu system. I see you have it planned to do multiple drawers. What would it take to do this in the project? I'm looking for a way to implement 2 drawers, one on the left side of the screen and one on the right?

Is it simply a matter of duplicating the HTML, and then creating a bunch of extra duplicate classes that transforms the drawer and pusher from the opposite side? I'm trying to think of a way to do this in SCSS in a user friendly, customizable way.

Hi,

Is there a way to prevent to automaitically scrolling to the top?
If the user happens to be in the middle of the page, and happens to click on the menu icon, the page he was on automatically scrolls all the way to the top.

I'd like a behaviour like that on cc.com.

Is it possible to achieve this with this tool?

Hi,

I have an AngularJS SPA and I seems to get an overflow problem when I manipulate the html inside the container from another html template that is bind to the DOM at a later time. (Popover with settings).

One of the settings in the SPA is filtering a list and reduce the size of the container, at the same time it cuts the popover with the settings. I will attach image.

I have tried to make overflow:visible and set a min-height on the pure-pusher-container, but it stills cut the popover.

Do you know of any way to prevent it form happening?

Hi,
thanks for this nice project.

Im trying to use it with bootstrap 3 with a navbar, but I´m having difficulties, mainly because bootstrap has a container-fluid class (which breaks the effect), and because it adds an extra scroll horizontally and vertically.

Have you tested with bootstrap, or do you know if it is compatible and how ?

Thanks,
Jorge Correia

Hi -

In _pure-drawer-global.scss I had to modify the following for it to compile

.pure-toggle-label[data-toggle-label='right'] {
	right: 56 / 2 + px;
	left: auto;
}

to

.pure-toggle-label[data-toggle-label='right'] {
	right: (56 / 2) + px;
	left: auto;
}

--Matt

Tested on chrome 56 and firefox 53

I could not get the $toggle-checked-color to work in SCSS. I looked through the SCSS and see where it should be applied, but it always reverts to the $toggle-color.

This presents a problem if you have a dark header and then a light drawer - or vice versa. :)

Is there an option that is like Push, but not actually Push the contents.

I basically just want the drawer to show up and shrink the main area to allow the drawer to be there, but not "scale down" or push the entire area over where it can't be seen anymore.

Thank you for the awesome nav code!

I am having a small issue where the expanded menu breaks the hero parallax background.

Example site: [https://www.webact.com/100/]

If you scroll halfway down the hero image, then open the menu, then scroll back up, the image no longer parallaxes and there's a large white space. It only happens while the menu is open. Any ideas why this is happening?

I've in-lined all the CSS so you can see it in the page source.

Thanks!

I do not see any reason why it is good to put node_modules into this repo, it would be better to put that directory into a .gitignore file.

Thank you for the great work.
I fell in love with "pure-effect-fade"..... but there is an error which I can not resolve.
With an IPAD I can not make a scrollable Navigation if I use my favorite "pure-effect-fade"
If I use for example "pure-effect-slide" it is working as expected

For any help, I am very grateful

How could I open the drawer using javascript or jquery instead of clicking on the checkbox? Is it possible?

Firstly. Superb work man! This is truly my go to off-canvas nav now.

Quick Q - Testing out the demo on my iPhone, I noticed that with quite a few nav items, they are cut off on landscape mode. Is there an option to make the off-canvas (nav area) element scrollable?

Many thanks

It would greatly appreciated if this would be published as an NPM package.

I am having issues of touch not working properly in the latest version of Chrome.

Using Chrome 56.0.2924.87 on Windows and my Samsung Galaxy S7. They are both experiencing the same issue.

Mouse scroll works fine but when touching the screen and dragging it is extremely laggy and if you attempt to swipe too quickly the menu will automatically close on you. Works fine in all other browsers.

Firstly great work, really love it!

On your demo the toggle icon slides off screen when using position right. This doesn't happen on position left.

Also it would be nice to place the toggle icon on the bottom for mobile device thumb use.

Hi, great product, best I have seen. However I'm trying to figure out how to default it to open?
I need it to be open for desktops and closed for mobile devices. Any help you can give would be greatly appreciated.

Hi Thomas,

I'm having some trouble modifying the CSS to make the hamburger icon scroll with the page. It stays fixed at the top of my page regardless of my changes.

Thoughts?

how can i add a button on overlay push menu which has capability to close the pushover menu

Hi. Nice navigation but it seems to be very limited to a number of links that happen to fit on a visitors screen. Guessing that # may even be risky. You can't scroll down the list for more like on a real site, say Facebook, correct?

Hi,

One issue I seem to have is with the 100% height set on the body. I know, without it then whenever you click on the icon toggle it will jump to the top of the page, but with it in my CSS it causes horizontal scrollbars?

Have tried min-height, margin, padding - 0. But no solution yet.

Many thanks

I'd like to use this lib however couldn't find any license. So I can't use it. Please put a license to your library. My humble suggestion is Mozilla Public License 2.0 (MPL-2.0)

Hi Thomas,

Your drawer is amazing, I have gotten a lot of awesome feedback on it. I am having one problem though, when viewing my website from a mobile device and you change the orientation of your device, the drawer button no longer works. The icon is there, but when you click on it, nothing happens. Any help would be greatly appreciated.

Thank you,

James

my issue may be similar to #43

But my query is specific, the menu area is hiding when screen height is small

Any good suggestions to overcome this problem

I know there's no javascript but maybe there's a way this lib could provide an easy way or the maintainer(s) could help demonstrate:

If wanting to use this library for a mobile app, I would want to use something like jquery mobile's swipe API. It would be a huge help to see how we can incrementally open the pure-drawer. That way, when the user is swiping to open the drawer, it opens as they swipe instead of just instantly opening all at once.

What think?

I do not understand the purpose of this and it can potentially be confusing.

Greetings from New Orleans.

First, I want to thank you for sharing Pure Drawers. I'm using pure drawers as the container for a single page web app with full screen background videos where all the content is pulled via AJAX and navigation can be controlled using the Annyang Voice Command library. For portable devices/tablets, I am simple swapping out the background vids with images and stuff that works on those things. However, formatting for different devices has proven pretty simple thanks to the fallbacks of Pure Drawer. It looks, sounds and works fantastic Very trippy.

I had a few issue when windows were re-sized - mainly when the menu was opened on re-size. But, these were easily fixed by setting width in px rather than % on a few things.

For the life of me, I can't figure out the jQuery code to toggle the classes to open and close the menu. I need this so I can trigger the menu using voice commands and I want to assign the menu toggle to some backgrounds as I want the content in the Pure Container to be accessible. Hence, I threw out the overlay.

I hate to bother you with something so simple. I just can't figure it out and I'm wasting time so I thought to ask.

Thanks in advance,

Mark in New Orleans

When the drawer toggle is clicked, the page position immediately snaps back to the top. Is it possible to retain the user's current scroll position when the drawer is toggled?

Full details and replicable snippet available here: https://stackoverflow.com/questions/45289439/how-is-this-pure-css-drawer-in-a-static-height-iframe-affecting-the-scroll-posit

When the hamburger menu content is longer than the actual main page content, the menu content sticks out at the page's bottom area.

I manage the hiding and showing of that area by the following code, and it works

$('#hamburger_menu_icon').click(function(){

	menu_open_now = !menu_open_now;   // on page load, menu_open_now is set as false
	
	if ( menu_open_now ){
		
		$('[data-effect="pure-effect-reveal"] .pure-drawer').attr('style', 'visibility:visible;overflow:scroll');					
		
	} else {
		$('[data-effect="pure-effect-reveal"] .pure-drawer').attr('style', 'visibility:hidden;overflow:hidden');					
	}	
});

As you see the logic is simple, add the visibility and overflow styles properly at the proper time.

This code obviously fires ONLY WHEN the menu icon is clicked!
With every click on that icon, I reverse bool variable menu_open_now to keep track of the state.

However, since clicking on any dim area on the main page also closes the menu, there goes my tracking!

How do I catch a click event on the main page ( while it is dim ) so I can update the state & run similar code as above?

Hi,

I was trying to use the pure-drawer on a mobile device and I noted that the container classes cause scrolling issues, when I remove the classes the scrolling issue goes away.. I'm using android 4.4, not using overflow scroll but I noticed the container class does make the div a scrolling div but still not sure why that would cause any performance issues with the scroll..

Basically the scroll is just really sluggish, like its having a hard time rendering the items on the screen.

I did do a little hack to add / remove classes on click, it works ok, would need some tweaking but would love to not have to hack around it if possible.

Thanks!

Thank you for your real awesome navigation.

1. How is it possible to achieve a fixed top navigation with large desktops (i.e. bootstrap lg)?
   Regards
   Pete

Hello, the CSS file I downloaded has 9500+ lines and it's got all the effects and a lot of base styles which goes in conflict with existing theme.

There is also a big list of instructions on things like this
@Keyframes bounceInUp {
@-webkit-keyframes bounceOut {
@Keyframes bounceOut {
@-webkit-keyframes bounceOutDown {
@Keyframes bounceOutDown {
@-webkit-keyframes bounceOutLeft {
...

What strategy would you recommend that I use to grab only the styles needed and perhaps bring the actual css needed down to less than 1000 lines?

For example, I need only the reveal effect.
Do I still need all those keyframes line and normalize.css, Animate.css sections?

http://mac81.github.io/pure-drawer/

Example:

I'm using the slideAlong effect, and the contents of my nav menu (what goes in pure-drawer) don't show up-- they still have visibility:hidden when I expand the menu... any ideas???

Good day Thomas, thank you for this wonderful drawer, an elegant and simple solution I must say! I did however discover a bit of a bug while doing some dev work on ios 7, OSX 10.9.5 Safari (just didn't check Safari on Windows) --- edit--- Windows too.

The drawer toggle shows in a distorted manner in static and morph states...even doing it on the Pure Drawer demo site. This only shows up in Safari and nothing else. I dug to see what the problem was and it might be a webkit issue or is there some tech that Safari has yet to get up to speed with? Any insight on this issue would be much appreciated as the ipad is natural habitat for this functionality. ;) Thank you for your time.

when i downloaded your project the index.html page did not load and after an hour trying to see why it wasn't, i found that you were missing a closing tag in your headers:

After calling modernizr-2.6.2.min.js
You forgot to close the script tag

Thanks
Nice work : )

Is it possible to not have a fixed toggler? I want it positioned within my header/logo. Then an exit toggler within the menus...

When using the Pure-Drawer with AngularJS routing the content screen stays grayed out when an item on the menu is selected/pressed. Can this be set to normal automatic when an item in the menu is pressed?

is there a way to control the toggling of the drawer with custom buttons? How would I trigger the opening and closing of the drawer if I dont want to use your built-in toggle icon.

i want to scroll down the menu section div. When items are overflow we can not see the items which are down side.

Pointing $show-drawer to $small-only results in the following error:

Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.

Error in the _effect-bounce.scss file.

The toggler can be distracting because of it's size. Can it reduced?