HybridMenu Help? [Archive] - Dynamic Drive Forums

WildYoungn

11-19-2015, 11:51 PM

1) Script Title: Responsive Hybrid Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/index.html

3) Describe problem: I have the menu working beautifully except for 2 issues when viewing on a mobile device. Please also see attached screenshot for clarification.
5744

Issue 1: The background of the submenu is opaque and covers the left side of the text on the page when the menu is opened. Please, what part of hybridmenu.css needs to be changed or added to fix this? I have tried both background-color: rgba(0, 0, 0, 0.5); and background-color: transparent; to fix this, but evidently I am using the wrong code snippet or I am placing it in the wrong section.

Issue 2: There is a separation of space at the top between the open menu and the logo/header when the menu is opened on mobile. How do I eliminate this?

The test page is at: http://www.socalequine.com/2015MenuRemod/HybridMenu/board-cc.htm

Thank you!!

Beverleyh

11-20-2015, 09:12 AM

A few points.

1. You've forgotten to setup the wrapper div. From the demo page;
<BODY>
<div id="wrapper">

Your page contents here
Your page contents here
Your page contents here
Your page contents here

</div>
</BODY>With this setup, you shouldn't have any background covering your content because the content will move over.

2. You've forgotten the mobile meta tag so your web page isn't responsive on mobile devices. See the yellow/cream highlighted message on the demo page.

Try to fix these first before you worry about the space between the open menu and the logo/hear as it may improve the situation. I can't see the gap currently (IE11) - is it showing in any particular browser?

3. You have two excessively large blocks of keywords. Google "keyword stuffing" for more info - its a black hat practise and can get your site penalised or even completely removed from the search engines that use them. 8-12 keywords maximum is what you should be aiming for, and only once in your page.

4. Validating your code will help with fixing formatting errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.socalequine.com%2F2015MenuRemod%2FHybridMenu%2Fboard-cc.htm&charset=%28detect+automatically%29&doctype=Inline&group=0 Fix these and then see how things look again afterwards.

molendijk

11-20-2015, 02:11 PM

The Responsive Hybrid Menu seems to have a couple of annoying issues:
1. When viewed on a vertically reduced laptop screen, the last items of long menu lists are out of sight and cannot be reached, because the sub items disappear as soon as the user scrolls down the page using the scroll bar.
2. In that case, using the mouse wheel for scrolling doesn't help, because although the menu doesn't disappear, it doesn't scroll upwards.
3. Scrolling the page upwards on a tablet (android or ios) produces the same problem as the one in #2: if the menu has many sub items, the last items cannot be reached because the menu is fixed.
4. Extra problem with iPas Air: an opened menu does not close when we do a touch (tab) outside it.

WildYoungn

01-25-2016, 10:03 PM

Thank you for your help!