Hide Cassiopeia collapsible menu fully in mobile

[dimoss]

Hi,

I would like to find a way to hide the Cassiopeia collapsible menu fully in mobile devices.

Using the following css is hiding the dropdown menu items but not the menu icon.

Code: Select all

@media (max-width: 991px) {
    .container-header .mod-menu {
        display: none;
    }
}

Any help is appreciated.

[AMurray]

It already does that by default.

The collapsible menu is for mobiles - how do you expect people to navigate the site without it? All you should see is the "hamburger" icon. tap or click and that opens the menu.

[dimoss]

It already does that by default.

The collapsible menu is for mobiles - how do you expect people to navigate the site without it? All you should see is the "hamburger" icon. tap or click and that opens the menu.

I want to create another menu only for mobiles which will have different menu items.

[Webdongle]

viewtopic.php?t=1007730#p3716545
https://brian.teeman.net/joomla/909-joo ... RyYXAiXQ==

[dimoss]

viewtopic.php?t=1007730#p3716545
https://brian.teeman.net/joomla/909-joo ... RyYXAiXQ==

Thanks. With the links you shared I managed to hide it as follows:

Code: Select all

@media (max-width: 768px) {
    .container-header .mod-menu {
        display: none;
    }
  
  .navbar-toggler {
    	display: none
  	}
}

My next question is how I could hide specific menu item on mobile. Using the below didn't work.

Code: Select all

@media (max-width: 768px) {
     .metismenu-item .item-413 { display: none;}
}

[Pavel-ww]

My next question is how I could hide specific menu item on mobile. Using the below didn't work.

Code: Select all

@media (max-width: 768px) {
     .metismenu-item .item-413 { display: none;}
}

Hi. Try {display: none !important;}

[dimoss]

My next question is how I could hide specific menu item on mobile. Using the below didn't work.

Code: Select all

@media (max-width: 768px) {
     .metismenu-item .item-413 { display: none;}
}

Hi. Try {display: none !important;}

Didn't work also.

[Mr. Wimpy]

Can you post the URL? So we can have a look at the code.

Did you clear cache?
Do you see your change in your browser's developer tool?
Is your css property active or overridden by other css (grayed out/line though)

[dimoss]

Can you post the URL? So we can have a look at the code.

Did you clear cache?
Do you see your change in your browser's developer tool?
Is your css property active or overridden by other css (grayed out/line though)

I haven't cleared the cache. I tried also in incognito.
I can't see the Chrome developer tool in mobile.

[dimoss]

My next question is how I could hide specific menu item on mobile. Using the below didn't work.

Code: Select all

@media (max-width: 768px) {
     .metismenu-item .item-413 { display: none;}
}

Hi. Try {display: none !important;}

Didn't work also.

Well, the issue was an extra space in the css code. It works with the following:

Code: Select all

@media (max-width: 768px) {
     .metismenu-item.item-413 { display: none !important;}

Thanks.