Menu Bar on mobile.

Suman Jan 13, 2014 12:10AM PST

Dear Mam/Sir,

For my desktop my menu bar appears to be horizontal.
But when i try to customize it for my mobile it appears to be vertical.
I wants to maintain a horizontal bar for my phone also.

Please suggest me how i could maintain this.
If you have any other suggestion for my menu bar to look better on mobile phone then let me know.


Up 0 rated Down
Jennifer Jan 13, 2014 09:04AM PST Mobify Agent

Hi Suman,

Our default styling creates a drop down menu from the elements within a global “navigation” selection. If you would prefer to have a horizontal menu bar for your site you will need to update the HTML and styling for the header template.

In general we have found that the vertical drop down menu gives users a better experience on mobile devices.


Up 2 rated Down
Suman Jan 13, 2014 11:42PM PST
HI Jennifer,

Thanks for your reply.
Now i need to know that how the current menu item could remain selected while using mobify.js
Please explain with some example.

Up -3 rated Down
Jennifer Jan 14, 2014 09:29AM PST Mobify Agent

Hi Suman,

If you would like to apply some styles to the menu item, to make it appear selected, these could be applied within the mobile CSS. For instance, if you had a link with the class “selected” you could add something like this:

.selected {
background-color: #some-color-value;

However, Mobify.js does not add classes like this to menu items by default. If the menu item does not already have a class (or some other way to tell that it is the currently selected item) then you will need to add some Javascript to the template to add a class that you can use to style the element.

Hope this helps,

Up -1 rated Down
Suman Jan 15, 2014 12:00AM PST
Hi Jannifer,

Thanks for your reply.
Can't you help me out with JavaScript code.

Up 0 rated Down
Jennifer Jan 15, 2014 11:08AM PST Mobify Agent

Hi Suman,

It’s difficult to provide code that will work without seeing the page in question and the code you have so far. However, if all of your menu links were within an element with the class “menu-items”, then something like this might work:

(function($) {
    $(".menu-items a").filter(function(){
        return this.href == location.href.replace(/#.*/, "");

The HTML for this solution might look something like this:

<ul class="menu-items">
    <li><a href="/Page-1.html">Page 1</a></li>
    <li><a href="/Page-2.html">Page 2</a></li>
    <li><a href="/Page-3.html">Page 3</a></li>


Up -2 rated Down
Suman Jan 16, 2014 01:49AM PST
Hi Jennifer,

Thanks for your reply.


Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found