Left menu as overlay.

TimTim
Posts: 6
Joined: 06 Jun 2015, 11:47

14 Jul 2015, 12:19

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

cagatay.civici
Prime
Posts: 18428
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

15 Jul 2015, 10:08


TimTim
Posts: 6
Joined: 06 Jun 2015, 11:47

15 Jul 2015, 13:59

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?

mert.sincan
Posts: 4362
Joined: 29 Jun 2013, 12:38

20 Jul 2015, 12:02

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 ...
 }

TimTim
Posts: 6
Joined: 06 Jun 2015, 11:47

20 Jul 2015, 20:33

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)

mert.sincan
Posts: 4362
Joined: 29 Jun 2013, 12:38

21 Jul 2015, 09:27

Glad to hear, thanks!

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

TimTim
Posts: 6
Joined: 06 Jun 2015, 11:47

21 Jul 2015, 10:01

Thank you!

mert.sincan
Posts: 4362
Joined: 29 Jun 2013, 12:38

21 Jul 2015, 11:02

You're welcome ;)

mustafa.cataltepe
Posts: 14
Joined: 10 Nov 2010, 17:48

24 Mar 2016, 13:31

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;
}

mert.sincan
Posts: 4362
Joined: 29 Jun 2013, 12:38

28 Mar 2016, 13:33

Thanks @mustafa for your solution ;) +1

Locked

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests