Rightest sublevel navigation items are hidden at small screens « Support Forum | Kriesi.at

Support Forum » Corona

Rightest sublevel navigation items are hidden at small screens

6 posts from 2 voices

Started 1 year ago by colorit2
Latest reply from Dude
This topic is resolved

Tags:

colorit2
Member

Hi,

when I try to work and to look at my site with a netbook, the third level navigation is hidden by the browser window:

http://i42.tinypic.com/xolgz5.jpg

The main containter of CORONA - boxed version - is as wide as the browser window, but the navigation item, that comes at the very right of the navigation is not completely shown:

The item "Galerien" has several sublevels like "nature", "travel" etc., but this 3rd level is not shown in less wide screens, because there's no more place at the right, where the browser window ends.

The sublevels of navigation needed to float to the left, if the browser window is only as wide as the CORONA main (boxed) container.

How can I do this, so that users with a small, less wide screen can see my sublevels of the rightest main navigation?
Thanks.

Posted 1 year ago #
colorit2
Member

no idea, how I can change the code in such way, that the main navigation items at 3rd level, that comes to the very right of the CORONA container float to the left, so that they are displayed at small screens, too (Netbook 10'')?

Posted 1 year ago #
Dude
Dude

Hey,
the problem was discussed here: http://www.kriesi.at/support/topic/dropdown-menu-issue-on-right-screen-edge#post-37545 - basically the best solution would be to restructre or reposition the menu items so that the far right menu item does not contain a 3 level sub menu...

Posted 1 year ago #
colorit2
Member

ok, thanks, I will see how I can do this

Posted 1 year ago #
colorit2
Member
I've added this to my custom.css and on the first testing, it seems to be a solution:
```
#top .main_menu .menu li ul ul {
left: -191px;
top: 0;
}
#top #header .main_menu .menu .submenu_available > a {
    background: url("../images/skin-minimal/arrow-left-light.png") no-repeat scroll left center #FFFFFF;
    text-indent: 10px;
}
#top #header .main_menu .menu .submenu_available>a:hover{
background:url("../images/skin-minimal/arrow-left-light.png") no-repeat scroll left center #f8f8f8;
text-indent: 10px;
}
```
The 3rd level of main navigation items are now floating to the left instead of the right, which causes that they disappear at the browser window edge.
The code contains also the small arrows showing to the left now, instead to the right as before, so that it fits to the navigation items now floating to the left.
This is the new result: http://i39.tinypic.com/ngosqt.jpg
Posted 1 year ago #
Dude
Dude

Great :) - I corrected the code a bit because it displayed wired for me.

Posted 1 year ago #