Gap between Brand and Nav bar

Design help General
#1

Client wants a Navigation the same as the one in the link attached however because the first media query is 960px I can only do it with a massive gap between the brand and the nav links.
Is there a way of getting the nav to break earlier?

This is the site he likes: https://www.sbdrainservices.co.uk/

Thanks all!

#2

Hi Graham,

What they did over there is to use 2 different elements. One element when the browser is wide enough, and another element when the browser is narrow.
I have to add, the way the elements are arranged, and the properties they apply is a bit wierd :face_with_raised_eyebrow:
For example, they gave each navbar child it’s own fixed position, instead of giving it to the hole navbar element.

Anyway…
What you can simply do, is to add a manual @media query
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

#3

Thanks for that. Excuse my ignorance but I’m not a coder (hence using Webflow).

What code to I have to add to do what you suggest? What do I need to add in place of the blue background bit to get another breakpoint?

#4

For that I will need to see your website :sweat_smile:
Can you share a read-only link?

#5

Here is a codepen with the custom CSS for reference.
https://codepen.io/wfhow/pen/MMRmGv