I have a problem with my NavBar design on my website, only between 992 and 1410 pixels. As you can see in the third photo below, my logo is improperly spaced on screens of this width. The first two photos show the NavBar as it should be. I cannot compress to the menu icon to fix this because WebFlow only lets you do that for the tablet and below breakpoint.
I cannot use other breakpoints to fix this because I can’t make a custom breakpoint that actually covers pixel range in question.
I do not know how to use custom code to fix this and would appreciate any help.
Its because the links are too long for the nav bar at once it goes below a certain pixel width.
It also happens with the donate button that too will drop down prior to the tablet breakpoint.
My suggestions are:
-reduce the padding on the nav bar to 5px, then change the image size of the brand image to a width of 150px. it’s as tight as you will get it but it will then fit on one line until the tablet breakpoint.
Design the nav bar where the logo sits central and above the nav links. That is common practice among nav bars with a lot of links.
Reduce the amount of links, try incorporating community outreach and mission services in to one link with a different title
rename the dropdown links, community outreach could be just ‘outreach’ mission services could be just ‘services’ join the fight could be ‘join us’
have a look at some other websites that have many links on the top and see how they deal with it.
I appreciate the reply but I’m not looking for design advice. The spacing and the wording was chosen for a reason, and I don’t want to make the navbar look weird on all screen sizes just to fix it on one screen size. I want to know if there is any possible way to change the spacing on a certain pixel range without affecting the other ranges.
