Horizontal Menu not acting correctly in Coolness Template

9 years 1 day ago #261560 by rmuscarello
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.

Please Log in to join the conversation.

8 years 11 months ago #261637 by krileon
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.

#container .clr,
#container .clr_bot {
	display: table;
	content: "";
	line-height: 0;
	height: auto;
}

#container #header {
	height: auto;
	min-height: 82px;
	background-color: #D6D6D6;
}

#header #menusearch {
	background: #8dc73f;
	border-top-left-radius: 10px;
	height: auto;
	min-height: 33px;
} 


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

8 years 11 months ago #261645 by rmuscarello
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/

Please Log in to join the conversation.

8 years 11 months ago #261651 by rmuscarello
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.

Please Log in to join the conversation.

8 years 11 months ago - 8 years 11 months ago #261669 by krileon

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.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.169 seconds

Facebook Twitter LinkedIn