Any chance of having the drop down menu list split into 2 or 3 columns as my menu list is longer than above the page fold – need it for accessibility purposes – I have purchased the menu code and would be willing to pay to have this done using css only. Thanks, Ian.
Sorry, I somehow missed your comment. Anyway, I currently don’t have the time for such modifications.
Hi, is possible third submenu, with items ?
Hi, is it possible to place icons or logo inside?
With some small modifications, it is possible to add icons.
Tx, I implemented it
We’ve run into an issue on high resolution touch devices like ipad 4.
On these, the responsive menu is not loaded, and when the user clicks on the top level menu they get taken straight to that category rather than the submenu opening.
(i.e. the old touch vs click issue)
I was not aware of this issue untill now. It looks like the media-query doesn’t target the iPad 4 because it has a larger viewport size that other mobile devices. As you can see from the CSS code, the mobile view targets devices with the viewport width smaller than or equal to 768 pixels (line 164 from the CSS file).
You just have to add the necessary media-queries to target high-resolution devices. Check out this link. Just add them at line 164. Use commas to separate the media-queries. I’ll update the file myself, but it might take a while untill it gets approved.
Hi author, first of all, thanks for putting up such a nice menu option, it’s great.
One question though… How do I delay the hiding of the submenu? I have played with transition-delays etc but I can’t seem to make the submenu wait a few seconds before it goes back up.
Reason for this is I have a gap between the top level menu items and the sub menu.
Any help would be greatly appreciated.
The menu uses the property display to hide/show the menu, and that property can not be manipulated by transitions. Contact me through email and I’ll help you.
I just want fix to the top the mobile view menu. I mean if I scroll down on the page, the menu should be stay on the top. Can you pls help me.
Thank you for your help in advance.
Use position: fixed; in the mobile media-query for the #nav selector.
Can the menu be centered when viewing in a full-sized computer browser?
I tried adding text-align:center to ”#nav ul” among other things but it didn’t work.
Thank you, Gary
Remove float: left from the #nav ul li selector and replace display: block with display: inline-block. Then you can add text-align: center to #nav ul.
Just noticed I made a mistake. In case any other buyers need to center the menu links, the correct selectors would be #nav > li and #nav. If you just want to center the menu bar, use margin: 0 auto;
Hi! Is it possible to install this menu bar on site bottom? And open tabs bottom – up?
Only with some modifications.
How I can hide a single li only in the mobile
Give that li an id and use display: none for that id inside the media query, where all the mobile styles are (starting at line 164 in the CSS file).
Works fine. Thank you.
And hide a li in Desktop?
A display in the li mobil hiding and the other backwards destock
Do the same thing with the id, but this time use display: none outside the media-query and display: block inside the media-query.
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
This item was featured on CodeCanyon