I am trying to make a header with the nav bar on the right and an image justified left of the nav bar. I also would like this same image to remain left justified to the header when sticky header is activated.
Currently, the only partial solutions I can find is to add the image as navigation Logo of the nav bar. Unfortunately, this only places the image properly when sticky mode is on. Otherwise, it sits left justified to the left of the nav bar when sticky mode is off. When sticky is off, I would want the image on the left of the header. This also leaves a gap/border to the left of the nav bar container which becomes obvious when sticky mode is activated.
Ideally, I would want a way to make the nav bar full screen at all times, just like when sticky mode is active. Is there a custom CSS to do this or another way to achieve the same goal? Also, is there a way to force the header height on mobile without also changing the drop down menu height?
This is nearly there. But I end up with some padding around the image once it is out of the nav bar. And on mobile is where the logo gets really squished, so it seems I would need additional CSS to force specific sizes for tablet and mobile? Or is making specific code for all 3 scenarios going to get a bit hairy?