Organize navigation menus on mobile devices

Markus · 2020-05-09 02:21:44

Hi,

I would like to optimize my navigation menus on the mobile devices https://www.mc-photografie.de

I don't like this at the moment because it is too confusing. That's because of my subpages and the 3 levels.

When I look at my navigation in portrait format on the iPad, all levels are "unfolded".
Normally it should be like on the big screen. A child menu item should unfold when I click on it. And then the next lower level if necessary.

Can I put this somewhere in the template? I haven't found that yet. Or is it only possible via CSS and/or PHP?

In my custom.css I have a section Mobile Menu. It seems to be the wrong setting or the decisive one is missing.

Do you have a tip for me?

Have a nice weekend
Markus

rod barbee · 2020-05-09 02:30:51

When I look at my navigation in portrait format on the iPad, all levels are "unfolded".
Normally it should be like on the big screen. A child menu item should unfold when I click on it. And then the next lower level if necessary.

That's not an option for mobile menus

but see if this might help
https://ttg-tips-and-tricks.barbeephoto … bile-menu/

Markus · 2020-05-09 17:12:05

Hi Rod,

this seems to be th solution i´m looking for. When I´ll be back on my MacBook I´ll tested it. Or does a solution of the inspector exist in iOS?

BTW: In Chrome I use the extension „Window Resizer" to look for the resolution in portrait mode. Actually I don´t find an extension for firefox or Safari. Do you have a tip for some extension.

Greetings
Markus

Markus · 2020-05-09 17:40:20

this works for me

#page__pallet__T1 li.menu-item:nth-child(2)>ul.sub-menu {
    display: none;
}

How would I have to change the code if I only wanted to show the first child menu in the photo gallery?

I haven't figured that out yet

tomowensphoto · 2020-05-09 22:13:52

Hi Rod,
Your code for mobile menu suppression works a treat. I find myself with more time on my hands in these days of lockdown to do things I ought to have done a while back.

rod barbee · 2020-05-09 22:15:21

Markus wrote:

this works for me
#page__pallet__T1 li.menu-item:nth-child(2)>ul.sub-menu {
    display: none;
}
How would I have to change the code if I only wanted to show the first child menu in the photo gallery?
I haven't figured that out yet

Just the first level below the Galleries menu item and not the rest?

rod barbee · 2020-05-09 22:17:07

Markus wrote:

Hi Rod,
this seems to be th solution i´m looking for. When I´ll be back on my MacBook I´ll tested it. Or does a solution of the inspector exist in iOS?
BTW: In Chrome I use the extension „Window Resizer" to look for the resolution in portrait mode. Actually I don´t find an extension for firefox or Safari. Do you have a tip for some extension.
Greetings
Markus

I just either manually resize the browser window or use the tools in the browser inspector to emulate mobile devices.

Markus · 2020-05-09 22:32:30

rod barbee wrote:

Markus wrote:
this works for me
#page__pallet__T1 li.menu-item:nth-child(2)>ul.sub-menu {
    display: none;
}
How would I have to change the code if I only wanted to show the first child menu in the photo gallery?
I haven't figured that out yet
Just the first level below the Galleries menu item and not the rest?

Yes Rod, I would like to show only the first level below the Galleries menu (Neue Fotos | Landschaft > | Tiere | Sport)

rod barbee · 2020-05-09 22:47:11

there should be a way to do that. Which of your sites is this for?

Markus · 2020-05-09 23:37:48

rod barbee wrote:

there should be a way to do that. Which of your sites is this for?

for this site https://www.mc-photografie.de/

rod barbee · 2020-05-09 23:38:39

try this. This will assume you add no other sub-menu items below other main menu items:

#page__pallet__T1 li.menu-item ul.sub-menu ul.sub-menu .menu-item {
    display: none;
    
}

Markus · 2020-05-10 00:08:25

rod barbee wrote:

try this. This will assume you add no other sub-menu items below other main menu items:
#page__pallet__T1 li.menu-item ul.sub-menu ul.sub-menu .menu-item {
    display: none;
    
}

Perfect! That's what I thought. Thanks Rod.

Community @ The Turning Gate

#1 2020-05-09 02:21:44

Organize navigation menus on mobile devices

#2 2020-05-09 02:30:51

Re: Organize navigation menus on mobile devices

#3 2020-05-09 17:12:05

Re: Organize navigation menus on mobile devices

#4 2020-05-09 17:40:20

Re: Organize navigation menus on mobile devices

#5 2020-05-09 22:13:52

Re: Organize navigation menus on mobile devices

#6 2020-05-09 22:15:21

Re: Organize navigation menus on mobile devices

#7 2020-05-09 22:17:07

Re: Organize navigation menus on mobile devices

#8 2020-05-09 22:32:30

Re: Organize navigation menus on mobile devices

#9 2020-05-09 22:47:11

Re: Organize navigation menus on mobile devices

#10 2020-05-09 23:37:48

Re: Organize navigation menus on mobile devices

#11 2020-05-09 23:38:39

Re: Organize navigation menus on mobile devices

#12 2020-05-10 00:08:25

Re: Organize navigation menus on mobile devices

Board footer