Streaming live at 10am (PST)

How to control the visibility of an element by manually adding a responsive breakpoint with custom code?


#1

Hi,

First post here! Absolutely loving Webflow :slight_smile:

I’ve had a search through the forum and watched most the Webflow help videos but can’t see if there’s a way to hide an object rather than ‘wrap’ it when the browser window becomes too small. An example being this mockup nav I’m making on a 1366 wide site, when the browser is window is reduced in size I’d ideally like the last ‘My Fixfire’ icon to hide rather than wrap around under the other icons. Is this possible?

I’ve hidden the whole menu on tablet and mob which is fine but its just that last icon which is bugging me.

I’m having to recreate a huge website sine Adobe announced the death of Muse today and wasting no time in signing up to Webflow. This will be one of many, many sites to re-build!

https://preview.webflow.com/preview/neils-stellar-site?preview=6b485a8ce4512befcd5774f2169f2a11

Thanks in advance for your help.

Neil.


Here is my site Read-Only: https://preview.webflow.com/preview/neils-stellar-site?preview=6b485a8ce4512befcd5774f2169f2a11
(how to share your site Read-Only link)


#2

There’s a million design solutions for making all your menu items fit before the tablet breakpoint happens and prevent a wrap, like reducing a bit the size of the items, using Flexbox for flexibility, using a condensed font, etc…

But here’s the technical direct answer to you question: use CSS to declare a new breakpoint and responsive rule that will hide your last item when the viewport gets under width:1048px.

Add code in the page in a custom code component, so it looks like this:

Now your item will only show when viewport if at least 1048px.

Code:

<style>
@media only screen and (max-width: 1048px) {
.nav-link.my-fixfire {display:none;}
}
</style>

Now while it’s very good to know how to code this, this is in your case a very bad solution. It’s an exception where you should focus on making everything works with the same rule, for efficiency, maintenance, simplicity.


#3

Hi Vincent, many thanks for taking the time to reply and explain this, greatly appreciated.

I understand what you mean, I’d rather not add the code if there’s a simpler route. I’ll try and tweak the design so it fits within my standard breakpoint instead. Its a balance between making it fit and keeping the design as close as possible to the original.

Thank you for your input!