Thanks for the quick reply Tom. I tried what you suggested. At the moment, it is further from what I was looking for but it may be easier to fix than the other way.
Putting the logo in the navigation bar makes it really tiny to fit in the bar. The logo is also the same color as the bar with a transparent background, so you really can’t see much of it as it is.
For this method to work, there would have to be a way to allow the logo to be larger than the navigation bar and to get rid of the coloring in the navigation bar only behind the logo. Are those easier to do?
The site is not live yet but here is a screenshot of what I had before. I’d like the site to look like this but with the gap closed between the logo and the navigation bar: https://postimg.org/image/s27t2umd3/
I can solve question 2 by resizing the logo and navigation bar so that it changes to tablet mode before it overlaps – that won’t be a problem at all. Question 3 I can do without.
If all I want to do is fill in the gap between the logo and the navigation bar, does that simplify things or is it still too complicated?
I don’t know CSS but I’m happy to learn whatever I need to know if there is a direction you can point me in.