Creating a Flexi Menu

codexpros · February 2016

Hi......I really need some assistance. Searched but could not find any answers anywhere.

Say that I have 5 menu items:

1. Is it possible to give them a ranking (sort order number)

2. Based on the ranking above is it then possible, once the responsive menu takes over and shows the 3 lines (hamburger), to also show the menu items in the space available based on the ranking.

So if I have:

Home (Rank 4)

About (Rank 5)

Clients (Rank 3)

Services (Rank 2)

Contact (Rank 1)

If the screen is already in mobile size it shows only the hamburger. As space become available it shows the menu items as per their rank. So first "Contact" would appear, then "Services", etc...

Can you please suggest a solution for this as it is also good for conversion and useful as a standard option in the template.

Thanks.

Regards

Philip

Albert · February 2016

Hi Philip,

such feature is not included so it's not possible to do what you ask for.

Thanks for understanding!

codexpros · February 2016

Please could you send me the CSS taht hides/shows the menu items based on responsiveness. I'll try to figure it out from there.

Albert · February 2016

Sure. You can use something like below:

@media only screen and (max-width: 767px) {
    #Top_bar .menu > li#menu-item-xxx { display: none !important; }
}

where xxx is menu id. More details about @media rules you can find on http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

codexpros · February 2016

Thanks. Much appreciated.

Creating a Flexi Menu

Comments