Horizontal Menu not acting correctly in Coolness Template

We are using a horizontal menu at the top of the website. Currently there are 8 menu items. When you reduce the width of your browser window the menu items at the end get wrapped down to a second line but all you can see of them are the tops of the lines that separate the menu items. If you hover your mouse around those lines you'll see the sub-menu show up. You can go to ohconline.com/ to see this happening. How do I fix this?

If you make the width of the browser window small enough you eventually get the menu button to click on which will show you the whole 1st level menu. Another problem occurs in this state that if there are sub-menus they are separated with a horizontal space between the sub-menu items. Any help would be greatly appreciated.

Looks like the CSS doesn't account for overflowing menus. Have created a bug ticket for further investigation.

forge.joomlapolis.com/issues/5205

For now the below CSS will work to fix it, which you can add to the bottom of the templates CSS file.

That shows all the menu items now when they wrap down to a second line if the browsers width is reduced. However, now I have a bunch of space to the left and right of the menu. Between the logo and the menu and the menu and the search field. You can see it at ohconline.com/

The other thing that is happening is when you narrow the width of the browser down to where the menu button shows up and click on it to show the menu. The sub-menus have a line space between each sub-menu item and when you try to hover over one of the sub-menu items to select it the sub-menu disappears.

That shows all the menu items now when they wrap down to a second line if the browsers width is reduced. However, now I have a bunch of space to the left and right of the menu. Between the logo and the menu and the menu and the search field. You can see it at ohconline.com/

It's a quickfix, not a rewrite. That entire usage is not designed for what you're doing (large amount of menu items; at most it's setup for like 4-5). That entire usage needs its styling rewritten to handle wrapping. The menu also only takes up 65% of its space to allocate some to the search input to avoid overlapping one another.

The other thing that is happening is when you narrow the width of the browser down to where the menu button shows up and click on it to show the menu. The sub-menus have a line space between each sub-menu item and when you try to hover over one of the sub-menu items to select it the sub-menu disappears.

That'd be another bug to fix. It shouldn't hide them at all or even use a hover even as that doesn't work on mobile. It should always display child menu items when collapsed like that.