Dear all
I have the following request, would be nice to get your advice on that.
Is it possible somehow to customize the left side menu to show it as overlay to create more space for the content on the page? Same way as it is done in Modena theme.
Its actually already behaves like that on smaller screens and phone displays (plus button on top menu that hide/show menu), so thought it should not be that difficult.
Thank you in advance
Left menu as overlay.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I think you can change;
- in topbar.xhtml (remove 'ShowOnMobile' class)
- in rio-layout.less
Please use @media (min-width: 640px) instead of @media (min-width: 640px) and (max-width: 960px)
- in topbar.xhtml (remove 'ShowOnMobile' class)
Code: Select all
<a id="mobile-menu-button" class="Fright ripplelink Unselectable ShadowEffect"><i class="icon-add186"></i></a>
Please use @media (min-width: 640px) instead of @media (min-width: 640px) and (max-width: 960px)
Code: Select all
/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) {
.... Css ...
}
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks!
Also, I think you should change rio-layout.less. Because, it creates rio-layout.css
Also, I think you should change rio-layout.less. Because, it creates rio-layout.css
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You're welcome
Github Profile: https://github.com/mertsincan
-
- Posts: 14
- Joined: 10 Nov 2010, 17:48
I resolved this issue for myself by adding another media query in rio-layout.css because i did not want topbar icons hidden inside menu like in a smaller screen. I only added "Layout Menu Cover" and "Layout Portlets Cover" css from 640 to 960 part but removed padding from portlets cover.
Code: Select all
@media (min-width: 960px) {
/*Layout Menu Cover*/
#layout-menu-cover {
display:block;
height:100%;
position:fixed;
z-index:999;
border-bottom: solid1px #e0e0e0;
margin-left: -230px;
overflow:hidden;
}
#layout-menu-cover.showmenu {
margin-left:0px;
}
.layout-menu{
margin-top: 57px;
}
/*Layout Portlets Cover*/
#layout-portlets-cover{
display:block;
margin-left:0px;
}
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks @mustafa for your solution +1
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 6 guests