Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Make menu item unresponsive

Featured Lock Resolved Task
Hi, can't seem to find a reliable solution to this. On my main menu I want to make a menu item only visible on desk top and not on mobiles. What's the best solution

12 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
Thanks for your query.I think in this situation You can use off-canvas for your mobile device
-Best Regards
Mehtaz

Rashida Rahman - Staff

More than a month ago #Permalink
Hi,
Thanks for your query.
In this case, you can use a media query for that specific menu item!
Having your site URL would be better to answer that.
I can only give you sample code now, you may modify it to fit your own need.
Here you go:

@media (min-width: 1200px){
li.item-108 {
display: none;
}
}


Please use your own menu item class to get your desired result!

Best Regards

Derrick Izilein

More than a month ago #Permalink
Hi Rashida, thanks for the response. My url at present is http://www.liveloungecardiff.co.uk and I want to make the what's on menu invisible on mobiles because the calendar is not very responsive. Could you please specify the process you have described. e.g. Is the code to go in the template.css file..etc and the custom class

Derrick Izilein

More than a month ago #Permalink
Hi, unfortunately, this was one of the reasons that precipitated my initial decision not to renew my joomshaper subscription. I don't think we would consider this a timely response......

Rashida Rahman - Staff

More than a month ago #Permalink
Hi,
You are using offcanvas module for your mobile menu. So it's easier to get what you want to do. You have no need to create a custom class in this case.
Just create a menu without your 'What's on' menu item and then within the offcanvas module, please choose your newly created menu(instead of main menu or previous menu)!
This will do the job for you.
https://prnt.sc/qbofrf
https://prnt.sc/qbogrq

Best Regards

Note: 16th December is Victory Day Here and yesterday was a holiday too...
Please take my sincere apology for not giving timely responses!

Derrick Izilein

More than a month ago #Permalink
Thanks Rashida, please take a closer look at the template as it does not have an off canvas module position linked to it like in your diagrams. Do you advise creating a new position from template.xml, what would you consider the best method to put this menu as the responsive option

Derrick Izilein

More than a month ago #Permalink
Hi Rashida, I'm still waiting for a response

Derrick Izilein

More than a month ago #Permalink
Hi Rashida, the mobile menu position in shaper vocal is not as clearly placed as you stated. in addition I have not had a response from you in relation to the best way to separate the mobile and main menus as per my previous query.

Rashida Rahman - Staff

More than a month ago #Permalink
Hi,
Sorry for the late response!
Please add the following code snippet to a custom CSS file:

.sp-mobile-menu li.menu-item:nth-last-child(2) {
display: none;
}


Please go to Extensions>Templates>styles
https://prnt.sc/qd6u30

Create a CSS file
https://prnt.sc/qd6o2g
https://prnt.sc/qd6p96

Then add the above code to the file:
https://prnt.sc/qd6qnk

Best Regards

Derrick Izilein

More than a month ago #Permalink
Thank you but please could you tell me what this custom css code is to do. Is it to help with the off canvas position or if it is for a css class what class it to be used in either the link class or custom class of the menu. The off canvas solution seemed pretty straight forward, however there is nothing in your responses that highlights how to change the mobile menu so this can be implemented

Pavel

More than a month ago #Permalink
Thank you but please could you tell me what this custom css code is to do. Is it to help with the off canvas position or if it is for a css class what class it to be used in either the link class or custom class of the menu. The off canvas solution seemed pretty straight forward, however there is nothing in your responses that highlights how to change the mobile menu so this can be implemented

As far as I understand it, the proposed code hides the menu item you want. This item is the second child from the end ( :nth-last-child(2) ).
1.jpg
In order to apply it to the desired width of the screen, use the media query.
For example, the following code will hide your menu item for all devices, the screen width is less than 992px

@media (max-width: 992px) {
.sp-mobile-menu li.menu-item:nth-last-child(2) {
display: none;
}
}

Paste this code into custom.css file as suggested above

Attachments (1)

  • 1.jpg
    1.jpg 235.5 KB

Rashida Rahman - Staff

More than a month ago #Permalink
Thank you but please could you tell me what this custom css code is to do. Is it to help with the off canvas position or if it is for a css class what class it to be used in either the link class or custom class of the menu. The off canvas solution seemed pretty straight forward, however there is nothing in your responses that highlights how to change the mobile menu so this can be implemented


Hi,
The above code will hide your desired menu item 'What's on' on the mobile view.
Just use the code in custom.css file.
In the Vocal template, there is a separate CSS file as well as a class for the mobile menu, so we need to hide just the menu item you want with this custom CSS. While I have a closer look at the template I found that in this case, the media query is not needed.

Best Regards


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 121
Toufiq

Toufiq

Total Accepted Answers: 74
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 27
Ofi Khan

Ofi Khan

Total Accepted Answers: 15
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 10

120

Templates

311208

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us