Archived topic
The mobile menu is not compatible
7 replies · Started by Jusung on July 26, 2022
Hello.
I have made a menu in the elements.
It is made by button.
It works well on the desktop and tablet.
However, it doesn't work on mobile.
So, I need to make another menu on wordpress that works for all devices.
As the result, I can see the menu on the mobile.
However, on the desktop and table, I can see the duplicated menu that is made by elements and made by the wordpress menu.
I want to keep the menu that is made in elements, but have no idea how I can see the menu on mobile.
I don't want to install plugin for this. maybe, there is a plugin that allows to make a menu only for mobile.
Also, I want to know the way to put the menu that is made by elements in the mobile menu toggle.
Hi there,
why not simply use the Themes Primary Navigation ? If you need additional styling then we can assist with that.
You can check the menu style on this website.
I made this in the elements.
But this deosn't appear on the mobile menu.
Can you help to make this menu that works for mobile menu?
Follow these steps:
1. In Appearance > Menus, create your menu and add its Location to the Primary Navigation.
2. Remove the Block Element used to display the button menu
3. Customizer > Layout > Primary Navigation, increase the Menu Item Height
4. Add this CSS to the Customizer > Additional CSS:
@media(min-width: 769px) {
.main-navigation .main-nav > ul > li:not(:last-child) > a {
border-right: 1px solid;
}
}@media(min-width: 769px) {
.main-navigation .main-nav > ul > li:not(:last-child) > a {
border-right: 1px solid;
}
}
This is what you sent me
, but I changed to like this.
@media(min-width: 769px) {
.main-navigation .main-nav > ul > li > a {
border-right: 1px solid;
font-size: 23px
}
Is it ok to remove "not(:last-child)"?
Also, I didn't change the menu item height.
As you can see, the each menu's width is different.
on the item, I could set the padding on each menu to make the width same.
However, here, I have no idea how I can make it same.
Yes, its ok to remove the :not(:last-child)
Now change your CSS to this:
@media (min-width: 769px) {
.main-navigation .main-nav > ul > li > a {
border-right: 1px solid;
min-width: 150px;
text-align: center;
}
}This will set the items to a minimum width of 150px.
The Font Size you can set in Customizer > Typography > Primary Navigation,
Thank you millions!
It has been sorted out!
Glad to be of help!
