Want an element not to display for smaller screens

[stuzz (Steve)]

Hello,

I am trying to prevent a tagline in the nav bar from displaying on smaller screens such as laptops. The current layout forces the menu links to drop down when viewed on smaller screens (can be seen when resizing the browser window).

I have searched the forum (and online to find some code to imbed) for a solution but was unsuccessful. I added some CSS (that I copied) to display none at certain breakpoints in the header but it did not work and I removed it. Your help would be much appreciated.

https://preview.webflow.com/preview/paptake?preview=a159823375ae2390130531ee0807a366

[PixelGeek (Nelson)]

Hi @stuzz

You can easily toggle on and off an element from the settings panel.

hope this helps

[stuzz (Steve)]

@PixelGeek, Thanks for the response.

Yes, I have done this for the tablet and phone views but what I want to do is hide it for something in between tablet and desktop, like laptop. Saturday I viewed the site on a small laptop at a store and saw that the menu had dropped down due to not having enough room in the nav bar. Can I have the tagline hide at a certain screen width by using some code in the header or imbed. I don’t know how to do this with code myself. Thanks in advance.

[PixelGeek (Nelson)]

At this time, we do not have custom media queries (aka breakpoints). But you can code your own into the custom code area.

For more information on this, please refer to this article: CSS @media Rule

[stuzz (Steve)]

If any of you coders can instruct me on what I am doing wrong it would be greatly appreciated. I put the code below in the custom head code box:

< style>
.tagline {
visibility: hidden; @media screen and (max-width: 1000px):
}

This makes the tagline hidden all the time. How can I get it to not show at something like a screen width of 1000px but have it show at larger screen sizes?