Sidebar

[fabiomtl]

Is there a way to collapse sidebar like the top menu?

I will use the sidebar like a second menu and I was imagining something like <aside class=”sidebar collapse”></aside>.

And if it is possible to apply the tab skin… will be more beautiful… gray background, left border, active item… etc.

Thank you

---

[Support]

Hello, I’m sorry, but I’m not sure I understood, did you mean make the sidebar sticky?

Thanks.

---

[fabiomtl]

Something like this…

This is the sidebar: https://docs.google.com/a/ipressnet.com.br/file/d/0B5STgo6zTZ49Z3FLTlpzemxHZEE/

Sidebar looking like tabs: https://docs.google.com/a/ipressnet.com.br/file/d/0B5STgo6zTZ49NjlHYnNuMEFtQWM/

And on mobile: https://docs.google.com/a/ipressnet.com.br/file/d/0B5STgo6zTZ49TE82Q182Q2szTFU/

tks

---

[Support]

Hello, I actually like that concept and I may be adding this in the future, please try this:

HTML:

<button class="btn btn-inverse sidebar-btn-collapse hidden-lg" data-toggle="collapse" data-target=".sidebar-nav-collapse">
	Menu <i class="fa fa-bars"></i>
</button>

<div class="sidebar-nav-collapse collapse">
	<ul class="nav nav-list secundary push-bottom">
		<li class="active"><a href="#">Design</a></li>
		<li><a href="#">Photos</a></li>
		<li><a href="#">Videos</a></li>
		<li><a href="#">Lifestyle</a></li>
		<li><a href="#">Technology</a></li>
	</ul>
</div>

CSS (css/custom.css):

ul.nav-list.secundary {
	border-radius: 4px;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);
	background-color: #FFF;
	border: 1px solid #EEE;
	padding: 0;	
}

ul.nav-list.secundary > li {
	border-left: 3px solid transparent;
}

ul.nav-list.secundary > li.active,
ul.nav-list.secundary > li:hover {
	border-left-color: #0088cc;
}

ul.nav-list.secundary > li:first-child {
	border-radius: 4px 0 0 0;
}

ul.nav-list.secundary > li:last-child {
	border-radius: 0 0 0 4px;
}

ul.nav-list.secundary > li a {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	border-bottom: 1px solid #EDEDDE;
	padding: 8px 15px;
}

ul.nav-list.secundary > li:hover a {
	padding-left: 20px;
}

.sidebar-btn-collapse {
	display: block;
	width: 100%;
	margin-bottom: 20px;
	text-align: right;
}

@media (min-width: 992px) {
	.sidebar-btn-collapse {
		display: none;
	}

	.sidebar-nav-collapse {
		display: block !important;
		height: auto !important;
	}
}

You may need to make a few changes, but the main idea is there 🙂

Thanks.

---

[fabiomtl]

Works great, thank you!

https://docs.google.com/a/ipressnet.com.br/file/d/0B5STgo6zTZ49Y0FfUHJzNWExZjQ/

https://docs.google.com/a/ipressnet.com.br/file/d/0B5STgo6zTZ49LVFRdW9rYXZPSXc/

---

[fabiomtl]

Sorry to bother but does not work anymore with Bootstrap 3.3.

Could you help me?

---

[Support]

Hello, it should work, the changes shouldn’t affect that part.

Can you please send me the link so I can check?

Thanks.

---

[fabiomtl]

Both versions:

http://www.ipressnet.com.br/v6/bootstrap33.html

http://www.ipressnet.com.br/v6/bootstrap32.html

Bootstrap 3.3 works just on mobile.

I would like to ask you to take a look at drop down menu when the user is logged in mobile version, the user data appear just on mouse over, I think could be a bug.

https://docs.google.com/a/ipressnet.com.br/file/d/0B5STgo6zTZ49Q21lam9YOWRLcVU/

Thank you

---

[Support]

Hello,

Hum, looks like it needs the visibility as well in the latest version, so please add this as well:

.sidebar-nav-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

For the user, it can be a conflict, to solve that please add:

@media (max-width: 991px) {
	#header nav.mega-menu ul.nav-main .mega-menu-signin ul.dropdown-menu {
		opacity: 1 !important;
	}
}

Thanks.

---

[fabiomtl]

It works!

Great support from you guys, congratulations!

---

[Author]

Posts