SideNav fixed

riderx pro asked 9 years ago

hello i use the fixed attribute for the sideNav but when my screen size is under (max-width : 992px), i need to pass the onclick var to true otherwise i need two click all time... one for choose item in the msideNav and the second for close the sideNav. so how i can fix this ?

Michal Szymanski staff pro premium priority answered 9 years ago

Do you mean after link redirection sidenav is still open? How do you navigate within your project? From file to file? By using routing?

riderx pro answered 9 years ago

i use routing because my website is in angular

Michal Szymanski staff pro premium priority answered 9 years ago

So you can try to close the sidenav on callback function within your router. If you are not sure what I am talking about read more about callback function in javascript first.

riderx pro answered 9 years ago

i choose to update your code and re use the closeOnClick i think it's better way: Window resize to reset on large screens fixed

if (menu_id.hasClass('fixed')) {
					$(window).resize(function () {
						if (window.innerWidth > 992) {
							if (options.closeOnClick === true)
							menu_id.off("click.itemclick", "a:not(.collapsible-header)");
							// Close menu if window is resized bigger than 992 and user has fixed sidenav
							if ($('#sidenav-overlay').css('opacity') !== 0 && menuOut) {
								removeMenu(true);
							} else {
								menu_id.removeAttr('style');
								menu_id.css('width', options.menuWidth);
							}
						} else if (menuOut === false) {
							if (options.closeOnClick === true) {
								menu_id.on("click.itemclick", "a:not(.collapsible-header)", function () {
									removeMenu();
								});
							}
							if (options.edge === 'left')
							menu_id.css('left', -1 * (options.menuWidth + 10));
							else
							menu_id.css('right', -1 * (options.menuWidth + 10));
						}

					});
				}
if closeOnClick, then add close event for all a tags in side sideNav

				if (options.closeOnClick === true) {
					if ((menu_id.hasClass('fixed') && window.innerWidth < 992) || !menu_id.hasClass('fixed')) {
						menu_id.on("click.itemclick", "a:not(.collapsible-header)", function () {
							removeMenu();
						});
					}
				}

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No