SideNav fixed

riderx pro asked 10 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 10 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 10 years ago

i use routing because my website is in angular

Michal Szymanski staff pro premium priority answered 10 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 10 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