How to hide an item from nav menu on desktop view?(without plugin)

Question

so I am using elementor for developing the website and in my primary header I have the logo, Nav- menu and button. Now what I want is I want to hide a specific item of Nav-menu on desktop but make it visible on mobile view. can someone please help me with this problem?

Answer 1

You can set a CSS class on the menu item, and then in the Custom CSS feature of Elementor, define the class globally: if Elementor Pro, then follow their directions, otherwise, these directions from Kinsta may help.

@media ( min-width: 768px ) {
    .hide-if-desktop {
        display: none !important;
    }
}

If this doesn't work, then you'll need to identify the selector that's competing with your style, and then change your selector to be more specific to override the existing style competing with yours.