I'd like to add custom CSS so a menu item only shows on the mobile menu I can add the css options to menu item through the appearance > menu page, however I don't know what to call the css code in the customize > additional css box. I've used the following code with no results. How do I make a single item mobile only?
@media only screen and (min-width: 1021px) { .nav-menu .mobile-link a { display: none; } }
Could you please provide us with a screenshot of the issue, along with a note on what you are trying to achieve and the related URL? This will help us review the situation and assist you more effectively.
Sure! I've posted the menu format using the mobile-link attribute as well as a the additional css code used. You can see that the menu displays the "Back us on Kickstarter" menu item, and the Back us on Kickstarter button header item.
I want to include some form of Back us on Kickstarter in the mobile menu, because the header button is not displayed on mobile, but I do not want to double menu items as looks now.
The button is included in the elementor built header, and is programed through elementor to not show on mobile. however, the menu item itself, shows on desktop and mobile, and i would like it to only show on mobile, when the menu is opened.
It appears that the theme's header system is not being used for the page URL in question. If you use the theme's header, you can create separate menus for desktop and mobile devices.
However, in your case, you can easily hide the link on desktop by adding the following code:
Regarding the green button not appearing in the mobile header, we checked the HTML code but did not find it included. Could you please verify that it has been added to for your mobile header?
That seemed to do exactly what I needed. Thank you.
And huge extra thank you, because I didn't realize that I was working with the support for our primary site's theme when we needed to work with our subpage theme's support. You guys absolutely rock.
I'd like to add custom CSS so a menu item only shows on the mobile menu I can add the css options to menu item through the appearance > menu page, however I don't know what to call the css code in the customize > additional css box. I've used the following code with no results. How do I make a single item mobile only?
@media only screen and (min-width: 1021px) { .nav-menu .mobile-link a { display: none; } }Hi,
If you want to make the CSS apply only for mobile devices, you can use the following code:
@media (max-width: 767px) { /* Add your code here. Please ensure it is correct. */ .nav-menu .mobile-link a { display: none; } }Hope this helps!
Regards,
Thank you, however something is still amiss, and I am unable to display the single menu item only on mobile; it is still visible on desktop.
Thank you for your reply!
Could you please provide us with a screenshot of the issue, along with a note on what you are trying to achieve and the related URL? This will help us review the situation and assist you more effectively.
Best regards,
Sure! I've posted the menu format using the mobile-link attribute as well as a the additional css code used. You can see that the menu displays the "Back us on Kickstarter" menu item, and the Back us on Kickstarter button header item.
I want to include some form of Back us on Kickstarter in the mobile menu, because the header button is not displayed on mobile, but I do not want to double menu items as looks now.
Attached files: Screenshot_5-8-2024_11540_darknoir.epictablegames.com.jpeg
Screenshot_5-8-2024_115428_darknoir.epictablegames.com.jpeg
Hi,
Thank you for your reply!
I understand you want to hide one of the two identical buttons, and this can be done with CSS. However, I am still a bit confused about the specifics.
It would be helpful if you could annotate a screenshot showing which button should be hidden or displayed for the both desktop and mobile views.
Additionally, please share the URL where this issue occurs. I will then assist you in creating the appropriate code.
Regards,
The link can be found here: Dark Noir – Get your free pre release sample of Dark Noir Now (epictablegames.com)
The button is included in the elementor built header, and is programed through elementor to not show on mobile. however, the menu item itself, shows on desktop and mobile, and i would like it to only show on mobile, when the menu is opened.
Attached files: dothisplease.png
Hi,
Thank you for your response.
It appears that the theme's header system is not being used for the page URL in question. If you use the theme's header, you can create separate menus for desktop and mobile devices.
However, in your case, you can easily hide the link on desktop by adding the following code:
@media (min-width: 992px) { #menu-main-menu .menu-item-24404 { display: none; } }Regarding the green button not appearing in the mobile header, we checked the HTML code but did not find it included. Could you please verify that it has been added to for your mobile header?
Best regards,
That seemed to do exactly what I needed. Thank you.
And huge extra thank you, because I didn't realize that I was working with the support for our primary site's theme when we needed to work with our subpage theme's support. You guys absolutely rock.
Thank you very much!