I have a link to index.html on the HOME button. But when you come to the mobilemenu (small screen menu) when you click this link you only get to the sub menu not to index.html. So what i want is when clicking the HOME button (in smallscreen menu) to go to index.html and to show the sub menu. I have manage to get the link working but when i come to index.html page the sub menu don’t show. The menu uses this js script:
Thank you.
Hi,
It seems to be working to me. Did you get this fixed in the meantime?
Hello, Pullo. No it’s not working. Try this.
Change yor screen size to about 900px or less, so that the mobile menu is toggled.
First click a link that has no submenu.
Now click a link that have submenus. You will see that the links them self do not work. You only go to submenu not the actual link. You can easely see this on the page name text i added on the pages about 400px down from top.
Thank you.
When the mobile menu is showing, if you click a link that has a submenu (e.g. home) then you see links to “Home”, “Home Sub 1” and “Home Sub 2”. All of these links work (for me at least). What is not correct about that?
Yes but the main home link is not going to index.html it only shows the sub menu.
If you click the HOME button i want to to go to index.html and show the sub menu.
I think we’re getting our wires crossed.
In the screenshot you say “You can’t reach index.htm from the mobile menu”
You can.
Make sure the mobile view is showing (obviously)
Go to Contact us
Open the menu by clicking on the hamburger icon
Click on “Home”
You now see “Back”, “Home”, “Home Sub 1” and “Home Sub 2”.
Click on “Home”
You are now at index.html
Is this not what you are trying to do?
Could it be that he wants Home to reload the page from afresh, and then show the appropriate menu option?
Dunno, but “You can’t reach index.htm from the mobile menu” is not correct.
I’m sorry. i dont know how else to explain. Refrech the page i have now removed the home link in the sub menu. I want to to go to index.html when clicking the main HOME button/link not the home link in sub menu.
Make sure the mobile view is showing (obviously)
Go to Contact us
Open the menu by clicking on the hamburger icon
Click on “Home” (You are now at index.html)
You now see “Back”, “Home Sub 1” and “Home Sub 2”.
It’s ''e.preventDefault(); in here that stops the home link going straight to index.htm.
// click interacts in mobile wersion
$('.rmm-dropdown').click(function (e) {
if($(this).parents(".rmm-menu").hasClass('rmm-mobile')){
//e.preventDefault();
e.stopPropagation();
With that line commented out the top level will take you to the home page but of course the subnavs will not be open as the new page will know nothing about them. I guess you would have to pass some data to the new page to trigger the opening of the menu but that’s too advanced for me 
It seems an unnecessary step to me when you could just have the links in the submenu anyway or not have a submenu when you don’t want anyone to use it.
or not have a submenu when you don’t want anyone to use it. What do you mean?
It seems an unnecessary step to me. Yes i could have a Home link in the submenu, but i think user will be confused when they don’t come to the index.html page when clicking the Home link in the main menu.
I guess you would have to pass some data to the new page to trigger the opening of the menu. This is exactly what i need. and it is to advanced for me to 
In the mobile menu you make the user click the home link and a submenu opens but it seems you don’t want them to use the sub menu but instead go to the home page and have a sub menu open on the home page instead. Therefore the submenu is redundant on all but the home page.
The problem is that on wide screen you have a hover menu which means that you can hover the menu and the sub links appear and then you have a choice of clicking the sublinks or indeed clicking the top level menu link. In mobile mode the menu only opens on click as there is no hover on mobiles so you don’t have that choice. You either go straight to the link you want or you allow the submenu to open and navigate from there.
Generally the top level menu in a dropdown would not be a link to anywhere and the destination would be via the submenus. These days you don’t need a fallback link on the top level because css can open the menus even with js off.
Therefore showing the submenus when on mobile is redundant on all but the home page if we follow your methodology
Hopefully @James_Hibbard can help with your js request now that the problem is somewhat clarified.
OK. Thank’s. Hopefully @James_Hibbard can help with your js request now that the problem is somewhat clarified. I hope so to.
To me this seems very counter-intuitive!
Having the sub-menu open by default will take up valuable space on a mobile screen. On a mobile, the menu should be unobtrusive, not get in your way. And what happens if the amount of sub-menu points grows to five or six? Half of the display will be menu!
Secondly, I’m still not clear how this should work. Should this behaviour be applied to all expandable menu points (e.g. Projects or Clients)? What should happen to the menu’s “Back” button (which lets you navigate back to the full menu)?
As it is the menu works fine. I would honestly leave it like that.
Should this behaviour be applied to all expandable menu points (e.g. Projects or Clients)? What should happen to the menu’s “Back” button:
Yes this should be applied to all expandable menu points. The back button should just close the sub menu and go back to mobile full menu.
As it is the menu works fine: But if i have sub menu on home button and no home button in the sub menu how can i reach index.html from the Mobile menu? I think it look strange if i have both a Home button in the main menu and then also a Home button in the sub menu.
Ha! I think I’ve understood your problem.
You want those top level menu points which themselves contain sub menu points (e.g. clients) to be clickable. So, for example when you hover over “Clients” you see a dropdown with “Ikea” and “Fastec”. You want that when a user clicks on “Ikea” or “Fastec” they are taken to the “Ikea” or “Fastec” page respectively. However, when the user clicks on “Clients”, then they should be taken to the “Clients” page. In the desktop view this is possible, in the mobile view it is not.
Did I get that right?
Yes that’s what I was assuming but as I mentioned above that will make any dropdowns in the mobile view redundant because the first click on the top level will navigate away. It’s a tricky problem and one way to solve it would be for the plus icon to open the menu only but the text to be the link rather than the whole block being the link.
In the desktop view this is possible, in the mobile view it is not:
Exactly.
Hi Patrik,
Please learn how to quote other posts, as it will make your posts easier to read.
To do this, highlight the text you wish to quote and a “quote reply” button will appear. Click this and the quote will be inserted into your post, like so:
So, to your problem. The best advice I can give you is: don’t do this. You are fighting the plugin and what it is designed to do. Also, opening menus by default will take away valuable space on a mobile screen. Instead, organize your pages in a way that compliments the library.
If however, you are really insistent on proceeding with this I would do the following.
rmm-mobile. This will indicate mobile view.<h1 id="page">HOME</h1>Here is a demo of this technique, so that you can see what I mean. Copy the code to your PC and resize the window. I didn’t bother re-appending the nodes (final step), as it is my hope you won’t use this technique.
<!doctype html>
<html>
<head>
<base href="http://test3.fcab.se/responsive_menu_test/responsive_menu_flat_two/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="utf-8">
<title>Multi Responsive Menu Flat Two</title>
<meta name="generator" content="FCAB - Webdesign">
<style>
div#container{
width: 970px;
position: relative;
margin: 0 auto 0 auto;
text-align: left;
}
body{
background-color: #111111;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
line-height: 1.1875;
margin: 0;
text-align: center;
}
</style>
<link href="Mulit_responsive_menu_flat_two.css" rel="stylesheet">
<style>
#wb_indexText1{
background-color: transparent;
border: 0px #000000 solid;
padding: 0;
margin: 0;
text-align: left;
}
#wb_indexText1 div{
text-align: left;
}
</style>
<!-- Responsive menu -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/responsivemultimenu.js"></script>
<script src="js/activelink_main_sub.js"></script>
<link href="css/responsivemultimenu.css" rel="stylesheet">
<script>
$(document).ready(function () {
$('#container').attr('id','content');
$("#content").css("cssText", "max-width: 970px !important;");
$("#content").css({ 'position': 'relative', 'margin': '0 auto 0 auto', 'text-align': 'left'});
});
</script>
<style>
@media screen and (min-width: 900px) {
.ribbon
{
/*Show the menu*/
}
}
.ribbon, .rmm-mobile, .rmm ul {
z-index: 100000;
}
</style>
</head>
<body>
<div id="container">
<div id="wb_indexText1" style="position:absolute;left:28px;top:400px;width:280px;height:37px;z-index:2;text-align:left;">
<span id="page" style="color:#FFFFFF;font-family:'Trebuchet MS';font-size:29px;">HOME</span></div>
</div>
<!-- Responsive menu -->
<div class="ribbon">
<div class="rmm style">
<ul>
<li>
<a href="./index.html">HOME</a>
<ul>
<li>
<a href="./sub1.html">Home Sub 1</a>
</li>
<li>
<a href="./fsub2.html">Home Sub 2</a>
</li>
</ul>
</li>
<li>
<a href="www.google.com">PROJECTS</a>
<ul>
<li>
<a href="./ikea-norway.html">IKEA - NORWAY</a>
</li>
<li>
<a href="./fastec-sweden.html">FASTEC - SWEDEN</a>
</li>
</ul>
</li>
<li>
<a href="#">CLIENTS</a>
<ul>
<li>
<a href="./ikea.html">IKEA</a>
</li>
<li>
<a href="./fastec.html">FASTEC</a>
</li>
</ul>
</li>
<li>
<a href="./contactus.html">CONTACT US</a>
</li>
<li>
<a href="./webshop.html">WEBSHOP</a>
</li>
<li>
<a href="#">ADMIN</a>
<ul>
<li>
<a href="./staff.html">STAFF</a>
</li>
<li>
<a href="./documents.html">DOCUMENTS</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
var page = $("#page").text();
$(window).on("resize", function(){
if ($(".rmm-mobile").length){
var els = $("ul.rmm-submenu");
els.each(function(){
if($(this).prev(".rmm-dropdown").text() === page){
$(".rmm-toggled-button").trigger("click");
$(this).prev(".rmm-dropdown").trigger("click");
} else {
$(this).remove();
}
});
}
});
setTimeout(function(){
$(window).trigger("resize");
}, 50);
</script>
</body>
</html>
Thank you for this. I still want to try this if nothing else just to see how this will look like. I will try this later so if you could please show me the last part (appending the nodes (final step) i would be thankful.
So once again Pullo, Thank you for your help.