1. Derrick Izilein
  2. Vocal
  3. Friday, 13 December 2019
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
Responses (12)
Accepted Answer Pending Moderation
Hi,
Thanks for your query.I think in this situation You can use off-canvas for your mobile device
-Best Regards
Mehtaz
  1. more than a month ago
  2. Vocal
  3. # 1
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Vocal
  3. # 2
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Vocal
  3. # 3
Accepted Answer Pending Moderation
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......
  1. more than a month ago
  2. Vocal
  3. # 4
Accepted Answer Pending Moderation
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!
  1. more than a month ago
  2. Vocal
  3. # 5
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Vocal
  3. # 6
Accepted Answer Pending Moderation
Hi Rashida, I'm still waiting for a response
  1. more than a month ago
  2. Vocal
  3. # 7
Accepted Answer Pending Moderation
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.
  1. more than a month ago
  2. Vocal
  3. # 8
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Vocal
  3. # 9
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Vocal
  3. # 10
Accepted Answer Pending Moderation
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. more than a month ago
  2. Vocal
  3. # 11
Accepted Answer Pending Moderation
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
  1. more than a month ago
  2. Vocal
  3. # 12


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


This forum is archived

This forum has been archived. Please use JoomShaper official support system.