Centre logo in navbar while remaining responsive

[x-w]

HI. I’m new to bubble, but have some knowledge of CSS / web development.
I’m trying to create a nav bar with a logo that is centred to the page, however I have two issue:

1. How do I firstly centre the logo? It is off centre, as it is within a group that includes the menu options to the left and sign in to the right but these are different lengths. I presume I need to align it to a parent container
2. How do I keep it centred while being responsive?
   Thanks.
   
   

[myko]

Hi, @x-w
I can’t guarantee it’s the optimal solution, but I’ll outline a simple resolution.

1. Enclose the menus on both sides within separate groups, each doubly framed. By keeping the width of the outer groups in the same ratio, the central logo will align in the middle. Here’s an example with an image provided. I’ve set the width of the parent groups on the left and right to 40%. For your site, the login/sign-in button on the right might have a narrower width. Therefore, enclose it in another child group and fix its width. For instance, if you have two buttons with a width of 150px each, the child group should be around 320px wide.
   

   

2. Make sure to account for screen width changes so that the child group doesn’t overflow. You can set this in the conditional tab.