Discussion on MetroNav - Metro Navigation Bar ver. CSS

Discussion on MetroNav - Metro Navigation Bar ver. CSS

Cart 179 sales

SOHN supports this item


17 comments found.

any plans to make responsive? really missing out on that market if not.

Hi, I am considering a responsive version. Thanks.


Is there a wordpress version??

If not… is there anything like it??


I am studying wordpress. Maybe I will make a wordpress plugin for this plugin.

Kind regards,


I bought this & then straight away realized that it’s not for Wordpress – whoops! Do you plan to make one that works with WP any time soon?


I have a plan to make a WP version for this plugin But I can not be sure about the time.

Kind regards!

This is awesome! I want to put this in a wordpress theme. If I purchase can you help me do that?

Any plans for a wordpress version? Need to do this asap though.

Sorry, I can not provide wordpress support at this time.

I will try to make a wordpress version but can not be sure about the time.

Kind regards.

HI What do I have to tweak in the css so that the background of the navigation bar is exactly the same background as the background behind it? i.e, I want the navigation (metronav?) to be #333333 which is the background of my page, but this is somewhat set to an opacity value?



To change navigation background you can use background classes I created in css file ( replace the current background class by what you need ). You can find all background classes in css file, I placed them at BACKGROUND SET part ( line 474 – 575 ).

Kind regards

Is this responsive and similar to your MenuStation code with swipe motion?

Been looking for this to use on mobile webview sites to give it that “app” feel.


Sorry, This plugin don’t support responsive design and don’t have swipe feature.

Kind regards

Hi, Great job. I found this from Metrobox. Can an Iframe be one of the items on the menu. I need it to go full width with about a 10 to 20 px border on all sides using color or bgimage. Cheers, J


Could you give me demos of your problems or what you intend to do ?

Now I can not be sure this plugin will work well with your iframe because I made it just for normal pages/templates.

Hi, I PM ’ed the links. Cheers, J

I got your email. I will test your demo with my plugins and reply you later ( soon ).


Can I add scrollbar and have more content like your other project?

Yes, you can make scrollbar with this item. If you would like to do this you can use jScrollpane plugin.

How can I use the email form in the MetroNav?


This item does not have email sending feature ( this item is just a css template ). If you want to integrate a form that can send email you must create it yourself or you can wait me release other versions.

Hi, I am having a hard time trying to get the click able to work on the bottom. Your latest update does not explain where to change to get the bottom to work. I tried according to your document but NO luck. Please email sample file.

Hi, I don’t know how to email to you ( I don’t see your email address when go to your profile ).

To make clickable menu work on the bottom position is easy as the top one.

1. Just add an anchor to <a></a> tag ( #menu1 ) in a main menu.

2. Then add an id=”menu1” to submenu.

3. Finally, change the class of submenu by a clickable class ( Example: if the current submenu class is “mn-play-bottom”, you can change it to “mn-play-bottom-click”, you can see these class in docs ( Section 4 – Important Classes ) ). That’s all.

If you can not make it work please give me your email address, I will send you a clickable bottom sample.

07 Jul 2012: New Update is available.

How do I increase the height of the menu?

To change the height of the main menu you open the metronav.css file then find .mn-lvl1-menu-metro/.mn-lvl1-menu class and change height to value you want.
.mn-lvl1-menu-metro { height:100px; }
.mn-lvl1-menu { height:40px; }

You also need to change height and line-height properties of .mn-style-1 a/.mn-style-2 a/.mn-style-normal a.
.mn-style-1 a {
    line-height:100px; <-- Change this value
    height:86px; <-- Change this value
    font-family: 'Dosis', Sans-Serif;

Finally, you set value of top/bottom properties of sub menu.
Example: Top version:
.mn-style-1 .mn-play, .mn-style-1 .mn-play-2, .mn-style-1 .mn-play-3,
.mn-style-2 .mn-play, .mn-style-2 .mn-play-2, .mn-style-2 .mn-play-3 {
.mn-style-normal .mn-play, .mn-style-normal .mn-play-2, .mn-style-normal .mn-play-3 {
Bottom Version:
.mn-style-1 .mn-play-bottom, .mn-style-1 .mn-play-2-bottom, .mn-style-1 .mn-play-3-bottom,
.mn-style-2 .mn-play-bottom, .mn-style-2 .mn-play-2-bottom, .mn-style-2 .mn-play-3-bottom {
.mn-style-normal .mn-play-bottom, .mn-style-normal .mn-play-2-bottom, .mn-style-normal .mn-play-3-bottom {

How do I make the button clickable and have the page show up?

In current version, the item has not supported click event. ( I will update new version support this feature later). But you can do this now by following steps:

1. To make the main menu can click to show the sub menu you need to add an anchor to tag in main menu.Example: <a href="#menu1">...</a> 2. Then add an id=”menu1” to sub menu. Example:

3. Finally, add new line into css file: .menu1:target { display:block }

and remove the hover event in css file. Find:
.mn-lvl1-menu li:hover .mn-play, .mn-lvl1-menu li:hover .mn-play-2, .mn-lvl1-menu li:hover .mn-play-3,
.mn-lvl1-menu-metro li:hover .mn-play, .mn-lvl1-menu-metro li:hover .mn-play-2, .mn-lvl1-menu-metro li:hover .mn-play-3,
.mn-lvl1-menu li:hover .mn-play-bottom, .mn-lvl1-menu li:hover .mn-play-2-bottom, .mn-lvl1-menu li:hover .mn-play-3-bottom,
.mn-lvl1-menu-metro li:hover .mn-play-bottom, .mn-lvl1-menu-metro li:hover .mn-play-2-bottom, .mn-lvl1-menu-metro li:hover .mn-play-3-bottom {
Then, replace to:
.mn-lvl1-menu li:hover .mn-play, .mn-lvl1-menu li:hover .mn-play-2, .mn-lvl1-menu li:hover .mn-play-3,
.mn-lvl1-menu-metro li:hover .mn-play, .mn-lvl1-menu-metro li:hover .mn-play-2, .mn-lvl1-menu-metro li:hover .mn-play-3,
.mn-lvl1-menu li:hover .mn-play-bottom, .mn-lvl1-menu li:hover .mn-play-2-bottom, .mn-lvl1-menu li:hover .mn-play-3-bottom,
.mn-lvl1-menu-metro li:hover .mn-play-bottom, .mn-lvl1-menu-metro li:hover .mn-play-2-bottom, .mn-lvl1-menu-metro li:hover .mn-play-3-bottom {

Note: CSS Click event does not work on IE. So for IE you still have to use hover event to show sub menu.

Thanks for your purchase.

Are you able to hide the Navigation Bar? (have button to hide it)

No, the navbar don’t have the hide feature at this version.

In this item I just use a little CSS3 for animation effects. I will make preview video later. Thank you.

Love the look of this. Though it is really hard to figure out the CSS3 stuff. Maybe include a video demo for us! Thank you!


Tell us what you think!

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

Sure, take me to the survey