Topbar navigation with sub-items that detects going off screen

[Jeroen]

Hi Tom,

I am a bit stuck in getting something shown correctly and I really hope I explain it correctly for you to understand:)
I am using your theme including premium plugins. the site I will build will be used as an intranet that needs to get working on different resolutions. Now the issue I have is that I am using the topmenu with submenu that is collapsing when hovering. be default it is opening the sub items to the right which is fine, but on the smaller resolution the sub-menu’s are reaching the end of the screen. the menu keeps working but goes off screen.

Now my question is, is there a way via your plugins (or css) that makes it possible to keep folding open the sub menus to the right until it detects the end of the screen and start folding to the left?

the top menu itself haves so menu items that it is fileld from left to right and the more right menu items do have this issue.

It now looks like this:

top menu
Sub menu 1
———sub menu 1 item
———sub menu 1 item
———————— sub sub menu ( this goes of screen in case the top menu item is to far to the right)

[Jeroen]

Hey Tom,

while searching further I just see your demo site does have the same on my screens with “smaller” resolution (1280 / 1024) : http://demo.generatepress.com/

when going into the top menu “sample”
Sub page 1 –> Sub page 1.1 is all fine but sub page 2.1 is off screen…

[Tom]

Yea this is definitely a problem with having many sub-menu – I’m not sure if a script exists that will detect if it’s near the edge of the screen.

You could tell all of your items to open to the left if that will work better with your configuration?

[Jeroen]

Yeah I had came to the same conclusion. the “problem” is that I do not know how many items they will create. For now I have solved it by using a max of 8 menu items (main ones) and decided to work with selfmade css classes for menu items 6,7 and 8. with using left: auto; and right:100%; these three now opens to the left.

will check later if I can solve it in a better way 🙂 Thanks anyway for your time again.

[Tom]

No problem 🙂

One solution is to use the “Click” option for the dropdown type in “Customize > Layout”.

This drops the sub-menus down vertically.

[Author]

Posts