Code

Discussion on Responsive CSS3 Menu without JS

Discussion on Responsive CSS3 Menu without JS

Cart 171 sales

davidtovt supports this item

Supported

30 comments found.

Just bought your code. It looks great. Once quick question. I am adding your menu as secondary on a webpage, it looks great. just like this one https://prnt.sc/48jgbAEzj4uE but when I am viewing it on my phone, the menu turns into hamburger which is fine, but I’d like to have it positioned just like this image below https://prnt.sc/NASqtdr_K8xB and also adding the word MENU like this https://prnt.sc/zEQ4eXB3iVIM

Please let me know.

Thanks;

Yes, please check your email. I sent it there

I never heard back. Can you provide a solution?

Hi,

I sent the solution. Include the ‘Responsive CSS3 Menu without JS’ and add the following CSS code to your CSS file: label.minimal-menu-button { display: flex; align-items: center; justify-content: center; top: auto; bottom: 0; width: 100%; margin: 0; padding-top: 3px; text-indent: 0; } label.minimal-menu-button:before { position: relative; top: auto; left: auto; bottom: auto; height: 22px; margin: -3px 10px 0 0; }

Good luck with your sales

Thank you!

For example in the menu under a Link ad numbers in a square or circle 1 | 2 | 3 | 4 | 5 etc ???

Hello lookgrafico!

Sorry, but the pagination isn’t part of this menu.

can you add a pagination under a link in a mobile version, like Link 1 1 | 2 | 3 | 4

?

Hi, How can I add close button?

Hi cocsike!

Thank you for the purchase. For the mobile button you can add close icon only with JavaScript.

Can not seem to get an iPad in landscape mode to use responsive menu. Anyone with success on this?

Hi there

The meu does not work correctly on iPhones since the IOS 9 Update.

Could you fix the bugs asap please and let me know when the new version is ready please?

Many thanks : )

I cannot attached a screenshot via that interface :(

I will need your email address. Please send me a message via mine: karl@webzen.co.uk

All of our clients and website visitors are having the same problem!

So it’s not a personal issue.

Your help with the iOS 9 issue would e appreciated:)

HI there,

The menu is not working properly on iPhones since the IOS 9 update.

Could you fix this bug asap please because the menu systems are not working correctly.

Hi love the look of this menu but having a problem getting the menu to open on an old iphone3GS clicking the icon does not open the menu. Is there any way to solve this please? Is this working on the latest versions please and is just a bug on an old phone.

The menu doesn’t dropdown on ipad and i can’t figure out why. Any chance i could email you a link to take a quick look? Thanks

Thank you!

HI, Thanks for this code.. Just wondering how I can right align the menu?

Thanks

Best

Hi.

Add the following code to .minimal-menu (at line 4.):
text-align: right;
direction: rtl; /* Text direction to "right-to-left" (if you need) */

Hello, I cannot find where the spacing above the first sub-menu and below the last sub-menu items is coming from. Could you let me know how i can remove the extra spacing in the sub-menu please? Thanks

i found it. Adding ’!important’ to the sub-menu ul padding seems to do the job.. (at around line 172) .minimal-menu ul ul, .minimal-menu ul .menu-wrapper {padding: 0 !important;}

What I think is the final hurdle for my implementation is ‘touchability’. The mini-menu works fine on my mobile phone, however the ‘full screen’ version (which is still displayed on my tablet) doesn’t seem to ‘unclick’ – the user is forced to select a link to follow. Is there a cunning way to force the menu to disappear by tapping somewhere outside of the nav area?

If you change the media screens, will be shown the mobile menu on tablet too.

(At line 95.)

@media only screen and (min-width: 991px) {

(At line 362.)
@media only screen and (max-width: 990px) {

Hi David, thank you for such a nice menu to work with. I’ve got two questions around how to style the arrows leading to sub-menus:

Could you let us know how to make the arrows to sub-menus bolder?

Is there a way to hide the ‘down’ arrows on the first level menu?

<ul> <li class="submenu first-level"> <a href="#">Top level, no arrow</a> <input class="show-submenu" type="checkbox" id="show-submenu-1" name="show-submenu-1" /> <ul> <li class="submenu"> <a href="#">First level sub menu with bold arrow</a> <input class="show-submenu" type="checkbox" id="show-submenu-1-2" name="show-submenu-1-2" /> <ul> <li><a href="#">Member of sub menu, no arrow</a></li> </ul> </li> </ul> </li> </ul>

Thanks very much!

Sussed it:

The thickness of the arrows is controlled by the height property at line 70 of the minimal-menu.css file (inside .minimal-menu ul li.submenu > a:before, .minimal-menu ul li.submenu > a:after )

In my example, adding “height:0px !important” to the .first-level class definition hid the down arrow.

Hi.

1. At line 70. change the height to 2px and will be bolder the arrow.
2. Add the following code to hide the main menu arrows:
.minimal-menu > ul > li.submenu > a:before,
.minimal-menu > ul > li.submenu > a:after {
    display: none;
}

Hello,

Nice menu!

What snippet do I add to the code and where to make the drop down background same color as top menu (green, blue, etc). And, also, how to chagne the white circle when highlighted, again just as top menu?

Just bought it.

Thanks

Hi Jim!

232. line – dropdown background:

background: #5bc7fd;

104. line – dropdown hover border:

border-color: #5bc7fd;

61. line – top menu hover border:

border: 1px solid #fff;

If you need more help, please write me an email.

Hello David, Thank you for your prompt assistance.

HI there

I have just purchased this item as it said that it requires no JavaScript.

However, in each of the examples that are provided they all call for JavaScript!

I quote: <script src=”../../responsive-nav.js”></script>

Is the item name and description therefor very misleading? :(

Hi! This item is really not require JavaScript. Send me your site address via my email address.

A million apologies!!!

You are correct.

I have spent most of the afternoon trying out various responsive menus and had mixed yours with another.

Again, I do apologise for any inconvenience.

I will try your code just now and get back to you : )

I have implemented the code and it works perfectly.

Thank you : )

Lovely piece of coding : )

Hello, Great work and that’s the one I am looking for a long time

However, just one presell question. According to your demo, the current page not highlighted in different color to let the user know where they are. Is it possible to amend the css for the current page color? then in the html just something like this.

li class=current

Thanks

Fixed. Please download it again. http://codecanyon.net/downloads

Superb 5 stars Service. 5 Stars rated !!!!!

Thank you! :)

Hi I’ve got the menu working just wondering how I can get it to work at a specific screen size with media queries? I can’t seem to figure out which code to change.

Also there is a bug in android on chrome. When you scroll down with the menu open the menu breaks from the top.

Hi. I fixed the scroll bug.

minimal-menu.css

Line 4-86 – all view
Line 90-346 – desktop view
Line 348-554 – mobile view
Line 556-560 – small mobile view

Hi I was wondering if it would be possible to add a search bar to the menu? I’m using wordpress and would also like to know if I can use this as only a mobile menu as I already have my desktop menu the way I want it.

Hi. Please send me your email address via my profile page.

Hi I sent one a few days ago, hope to hear back from you soon.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey