Hi,
The left or the right sub-menu?
Do you mean in the entire header? What about the existing logo url?
-Takanakui
Left Sub-menu
Example:
First >
Second >
Third
Fourth
Click on enitre header “First” and will open sub-menu.
I thought you were talking about the header with the logo and not the text of the menu item.
The problem of using the text of the menu item to open the submenu is that you won’t be able to navigate to that menu item link.
In this case you won’t be able to go to the First url, since we can do 2 actions at the same time.
Let me know if you still want to move forward with that idea so I can see what is necessary.
-Takanakui
Sorry, but my english is not very well))
Yes, i very want to move forward, because menu item like a First or Second have the url – # and don’t need to navigate, only open sub menu.
-
This reply was modified 9 years, 3 months ago by
pakmanhunter.
In that case add the code below to the custom css option in the WP Mobile Meny general options tab.
.mob-expand-submenu i {
top: 0px!important;
width: initial!important;
float: right!important;
}
.mob-expand-submenu {
position: absolute;
top: 0px;
right: 0px;
float: right;
width: 100%;
height: 50px;
z-index: 99999999;
}
This is how it looks like.
http://d.pr/i/7sbZ/3FyDwgix
-Takanakui
No problem. Glad I could help you.
-Rui
I want to do the same thing but your fix didn’t work for me. Basically if I click the Down Arrow next to my text the sub menu opens (I have changes this to a + and -) but if I click the Title it tries to go to a url. None of our parent menus go to urls and I want it to show menu instead when I click them. I thought I would change this behavior in the mobile-menu/js/mobilemenu.js file but above you show it as a css change. Let me know if I misunderstood you and there is a different fix.
Thanks,
Brent
Never mind. I had to reset the dynamic css. It add some margin or padding space below it that I will play with.
Hi Rui,
So actually I am having an issue. The on-click is working beautifully but the styling gets messed up when I add this style:
.mob-expand-submenu {
position: absolute;
top: 0px;
right: 0px;
float: right;
width: 100%;
height: 50px !important;
z-index: 99999999;
}
Specifically the width: 100%; attribute. If I take it out the spacing issue goes away but the onclick stops working.
Here is a screen capture of the menu styling. I am up against a deadline to try and make this work so any thoughts you have would be much appreciated.
Thanks.
-Brent
Rui – the link to see this menu in action is Menu Issue
Thanks
-Brent
Hi @brent,
The icons don’t seem to be aligned because of the top css value, change it to -5px instead 0px
.mob-expand-submenu i {
top: -5px!important;
width: initial!important;
float: right!important;
}
regarding this css below:
.mob-expand-submenu {
position: absolute;
top: 0px;
right: 0px;
float: right;
width: 100%;
height: 50px !important;
z-index: 99999999;
}
I forgot the pointer when you mouse over so add also this line
cursor:pointer;
Anything else? It seems fine to me.
-Takanakui
Thanks for the icon fix. The issue I still have is the space between the parent elements that have sub menus. they should all have even vertical spacing as it is between Home / Contact Us and What We Do. For what ever reason, if I take out the “Width: 100%;” line the correct spacing returns but when it is there, the spacing between What We Do / Who We Are and Learning Library is an extra 40+ px. I would think the Height: 50px would take care of that but it isn’t for some reason.
This is the one issue making it unusable for my client. Any thoughts would be greatly appreciated.
Thanks Takanakui
couldn’t understand what in your theme css it’s causing that situation. It’s working fine with Twenty 17
I tried a different approach using jQuery.
replace the mobmenu.js that is inside the js directory by this one below
https://www.dropbox.com/s/xyteinj770jdino/mobmenu.js?dl=0
You need to clear the browser cache to see the changes.
also you need to remove the width:100%; from the .mob-expand-submenu
Give it a try and let me know.
-Takanakui
When I swap out the js file with the new one and change the css the spacing is fixed but it takes the drop down buttons away and clicking on the title doesn’t show the submenu. I would like the +/- icons to still be useable as well as show sub-menu on click of title. I dumped cache and tried on different browsers as well.
-Brent
