Advertisement

Hide Cassiopeia collapsible menu fully in mobile

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
dimoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Wed Nov 12, 2008 2:16 pm

Hide Cassiopeia collapsible menu fully in mobile

Post by dimoss » Thu Oct 31, 2024 8:08 pm

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.

Advertisement
User avatar
AMurray
Joomla! Master
Joomla! Master
Posts: 10342
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by AMurray » Thu Oct 31, 2024 9:11 pm

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.
Regards - A Murray
General Support Moderator

dimoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Wed Nov 12, 2008 2:16 pm

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by dimoss » Thu Oct 31, 2024 9:20 pm

AMurray wrote: Thu Oct 31, 2024 9:11 pm 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.


dimoss
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Wed Nov 12, 2008 2:16 pm

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by dimoss » Fri Nov 01, 2024 6:54 am

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;}
}

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1755
Joined: Tue Jun 30, 2020 12:17 pm

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by Pavel-ww » Fri Nov 01, 2024 7:47 am

dimoss wrote: Fri Nov 01, 2024 6:54 am 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
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Wed Nov 12, 2008 2:16 pm

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by dimoss » Fri Nov 01, 2024 8:00 am

Pavel-ww wrote: Fri Nov 01, 2024 7:47 am
dimoss wrote: Fri Nov 01, 2024 6:54 am 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
Joomla! Guru
Joomla! Guru
Posts: 584
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by Mr. Wimpy » Fri Nov 01, 2024 9:14 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Wed Nov 12, 2008 2:16 pm

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by dimoss » Fri Nov 01, 2024 9:39 am

Mr. Wimpy wrote: Fri Nov 01, 2024 9:14 am 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
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Wed Nov 12, 2008 2:16 pm

Re: Hide Cassiopeia collapsible menu fully in mobile

Post by dimoss » Fri Nov 01, 2024 9:47 am

dimoss wrote: Fri Nov 01, 2024 8:00 am
Pavel-ww wrote: Fri Nov 01, 2024 7:47 am
dimoss wrote: Fri Nov 01, 2024 6:54 am 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.

Advertisement

Post Reply

Return to “Templates for Joomla! 4.x”