Creating Separate Mobile Menu

[tberkow123]

Right now, I am using the regular navigation menu and the side area menu. I am wondering how I can create a different menu to show on mobile devices. I basically need to incorporate both menus into one for mobile.

[Radu]

This can be achieved by hidden via CSS one of those menus but create your desired menu that you want to show it on mobile only and provide a screenshot where it’s this menu located and i will provide to you a css code to can acheive that

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[tberkow123]

I am not sure what exactly you want me to show you. I created a menu called Mobile Menu and it looks like the menu ID is 29 (http://clcid.leadsngin.com/wp-admin/nav-menus.php?menu=29). I do not have it set to any of the theme locations as of now.

[Radu]

To can view the menus in backend i need admin credetials

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[tberkow123]

http://clcid.leadsngin.com/wp-admin/
tempaccess
aNZMm!bu5F0B2b*OIDXzUi(3

[Radu]

Where you want to add the new items ? to the drop-down menu or to the side menu ?

The technical solution it’s to hide the rest of the items for mobile only using this class hidden-xs on menu item class.

like this : https://drive.google.com/file/d/0Bxo5b6iHWRMwUWFSVzBQMzRtV00/view

If you want to hide some elements for desktop use this class hidden-lg

R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[tberkow123]

So, I have the 2 menus that you can see: the main menu and the side menu. Then, there is a mobile menu which is completely separate. I want to hide the side menu and the regular menu on mobile and show the mobile menu.

[tberkow123]

So do I create one large menu and then just add the appropriate classes? Are those classes already created?

[Radu]

Hi,

Using this css

COPY CODE

@media(max-width:720px){
    li#nav-menu-item-side {
    display: none;}
}

Will hide the sidemenu icon on mobile and the default mobile menu will be available.

The settings in wp-admin -> theme options -> side menu will be like this

Yes, the classes are already created in bootstrap library that it’s included in our theme.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Radu]

The css will be added to wp-admin -> theme options -> general settings -> quick css

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[tberkow123]

Hi, this code did not work to hide the side menu on mobile
@media(max-width:720px){
li#nav-menu-item-side {
display: none;}
}

[tberkow123]

Nevermind.. I added an !important tag and it worked.

[Radu]

Great

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts