Making the menu responsive

[omgzhobbs]

On my website, sadly I need to have masses of categories, which means the menu covers the entire left hand of the page.  Which isn't a big issue, until the website is viewed on a tablet or mobile device and the user needs to scroll past this every time the page loads.. not really the best way to do things as most people just presume the website has not loaded and are still on a menu screen.

I have found a responsive menu coding to use, its just implementing it into the website now, how would i do this?  I need to keep the current menu styling, but still manage it to change to responsive.

I would use the mobile theme that comes with prestashop, but it does not work correctly and it seems best to keep the design similar.

 

Here is the code of the responsive menu, as you can see it is laid out similarly to prestashop with the <li> tags, which I am guessing is a big help?

        <div class="rmm">
            <ul>
                <li><a href='#home'>Home</a></li>
                <li><a href='#about-me'>Category</a></li>
                <li><a href='#gallery'>Category 2</a></li>
                <li><a href='#blog'>Category 3</a></li>
                <li><a href='#links'>Category 4</a></li>
                <li><a href='#sitemap'>Category 5</a></li> 
            </ul>
        </div>

and here is the CSS code;

 

.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	text-align: center;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
	font-family:Arial;
}
.rmm a {
	color:#ebebeb;
	text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}
.rmm ul {
	display:block;
	width:auto !important;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}

There is also meta codes for linking to the stylesheet and also the JS files.

[vekia]

you use default block categories module?

[omgzhobbs]

Yeah using the default block