[Support request] Full width nav bar?

[Thomas]

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?

[Thomas]

I forgot to mention I had the nav bar set to “Float Right” alignment. I am playing around with having the nav bar above or below the header so I can better control the header image and size on mobile.

Sorry for the post as it seems I have found an alternative I can live with.

[Tom]

Hi there,

If I’m understanding correctly, I think this is what you’re after: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Let me know 🙂

[Thomas]

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?

[Leo]

Hi there,

I’m not quite sure what you mean? Doesn’t look like you are using Tom’s method above?

[Author]

Posts