Page 1 of 2

Left menu as overlay.

Posted: 14 Jul 2015, 12:19
by TimTim
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

Re: Left menu as overlay.

Posted: 15 Jul 2015, 10:08
by cagatay.civici

Re: Left menu as overlay.

Posted: 15 Jul 2015, 13:59
by TimTim
thanks for prompt reply, Optimus.

As i mentioned - i saw the way how the menu is implemented in Modena, like it and the question is: is there any way how to do the 'Modena way' menu in Rio via the customization without purchasing the Modena theme?

Re: Left menu as overlay.

Posted: 20 Jul 2015, 12:02
by mert.sincan
I think you can change;
- 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> 
- in rio-layout.less
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 ...
 }

Re: Left menu as overlay.

Posted: 20 Jul 2015, 20:33
by TimTim
Many thanks, Aragorn! It works that way!
(minor update for those who is interested: second change was done in rio-layout.css, Rio v2.0)

Re: Left menu as overlay.

Posted: 21 Jul 2015, 09:27
by mert.sincan
Glad to hear, thanks!

Also, I think you should change rio-layout.less. Because, it creates rio-layout.css

Re: Left menu as overlay.

Posted: 21 Jul 2015, 10:01
by TimTim
Thank you!

Re: Left menu as overlay.

Posted: 21 Jul 2015, 11:02
by mert.sincan
You're welcome ;)

Re: Left menu as overlay.

Posted: 24 Mar 2016, 13:31
by mustafa.cataltepe
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;
}

Re: Left menu as overlay.

Posted: 28 Mar 2016, 13:33
by mert.sincan
Thanks @mustafa for your solution ;) +1