Solved Collapse submenu items in the mobile menu

This is all fantastic! Do you know how to change the icon (so it's different than the parent icon) on the second level menu link? Thanks!

 

Awesome! Thanks!!!

 

Hi, thanks for the code. Its working now, but the background color from my whole submenu is now transparent (on the mobile version). I want to have it the same color like my menu on the top. Also the submenu is not width enough, the + button is behind the text.
Could you guys help me how I can fix this .
My webpage is: www.giulioandelena.com

thanks in advanced.

 

Hi, Thanks for your fast reply. The background color didn't changed a while, but after I deleted my browsers cache I could manage this.
Thanks for the settings. I just have one thing now: the + button is not really on the same height like the letters can I bring the + button a little bit more up?

 

perfect thanks a lot

 

okay, there is one more problem . its not for the mobile. its for the desktop version. the sign next to the words in the sub menu is hidden from the text. is it possible that the whole text is in one line and the sign next to the text. I tried to set margin left and margin right to -50 but there didn't changed anything.

thanks in advanced.

 

Hi all,

Divi 4 here using theme builder, the dropdown works a treat but the menu does not move to the left, it just still drops down under the Hamburger, how can I move it to the left.

Thanks

 

Code works ....Thanks again!!

 

Hi
Just want to say thankyou for this code it worked a treat on a Tablet, but one small issue is on a mobile the width of the dropdown is too narrow can you tell me how to make it wider. Please see screenshot which I have uploaded. Our website is www.preceptscotland.org

Many Thanks your help will be very much appreciated

Derek

 

Hi many thanks for your help, that has worked but fills the full width of a mobile screen what I was hoping for is to have adjustable width so I can adjust to our requirements.

Kind Regards
Derek

 

Buongiorno,
Ho questo codice nel menu a larghezza intera

<style>
/ * abilita la classe di seguito una volta terminata la modifica del menu * /


.fullwidth-menu {
opacità: 0;
in alto: 0vh;
visibilità: nascosta;
}


.line {
blocco di visualizzazione;
posizione: assoluta;
altezza: 3px;
larghezza: 100%;
sfondo: # 000;
opacità: 1;
-webkit-Transition: .1s Facility-In-Out;
-moz-transizione: .1s facilità-in-out;
-o-transizione: .1s facilità-in-out;
transizione: .1s facilità-in-out;
}

.fullwidth-open.open .line {
sfondo: # 000;
}

.Linea 1 {
in alto: 15px;
}
.linea 2 {
in alto: 25px;
larghezza: 100%;
}

.line-3 {
in alto: 35px;
larghezza: 100%;
}

.fullwidth-open.open .line-1 {
in alto: 25px;
larghezza: 100%;
-webkit-transform: ruota (135deg);
-moz-transform: ruota (135deg);
-o-transform: ruota (135deg);
trasformare: ruotare (135deg);
}

.fullwidth-open.open .line-2 {
display: nessuno;
}

.fullwidth-open.open .line-3 {
in alto: 25px;
larghezza: 100%;
-webkit-transform: ruota (-135deg);
-moz-transform: ruota (-135deg);
-o-transform: ruota (-135deg);
trasformare: ruotare (-135deg);
}

.fullwidth-menu-open {
opacità: 1! importante;
in alto: 0! importante;
visibilità: visibile! importante;
}

.fullwidth-menu {
-webkit-Transition: tutti gli 0.5 sono facili! importante;
-moz-transizione: tutti gli 0,5 sono facili! importante;
-o-transizione: tutti gli 0,5 sono facili! importante;
-m-Transizione: tutti gli 0,5 sono facili! importante;
transizione: tutti gli 0,5 sono facili! importante;
}
.main-menu-item ul {
text-align: center;
display: nessuno;
imbottitura: 0;
margin-top: 50px;
}

.toggle-sub-menu {
cursore: puntatore;
}

Vorrei rimuovere + e - e far funzionare il menu facendo clic sul testo.
Mi potete aiutare?

 

I use the normal header and a theme builder header on another page to get different menus on different pages.

 

Hello, I have a problem. When I add the script, the Icon is visible on the right of the Mobile menu but if i click on icon for open the sub menu, the click open the menu page and not open collapse menu.