Positioning Elements in Navbar

Bootstrap Studio Help
1

Hi,

I am trying to position elements within a navbar and I’m struggling to understand why my attempts are failing (I’m new to web development).

I have used the default Bootstrap Navbar component that Bootstrap Studio provides and have gone through and copied over the CSS blocks of the navbar into my own stylesheet to override the default Bootstrap CSS code blocks the navbar has (style-wise, everything is looking how I want it).

I am now trying to achieve perfect positioning of my elements within the navbar. The navbar contains a brand logo, nav (with multiple links), and finally a button. I would like to have the brand logo on the left of the navbar, my nav (with links) in the absolute center of my navbar, and the button on the right of my navbar. I have tried amending the .navbar class within my CSS stylesheet (which the parent Navbar element is assigned) but none of my elements seem to be moving at all, no matter what I try.

1920×1027 90.8 KB

As you can see in the above image the 3 components of my navbar are all nudged on the left. According to the CSS code block for the .navbar class there is two attributes set in the CSS code block that I thought would have spaced the elements out within the navbar (mainly justify-content: space-around). No matter what I change in the .navbar class none of my elements (which are children of the Navbar component) move.

I’m not sure if I am missing something here.

2

Just an update here. It was easier than I thought.

I assigned my Nav component the Bootstrap spacing class mx-auto which centered the nav straight in the middle of the navbar. The logo and button were then automatically pushed to the left and right sides respectively.

1920×1027 83.3 KB

One thing I did notice was that my original logo (that had typography to the left of the badge mark), I assigned its width to 25% in my CSS code block. This offset my nav (and its links) away from the center (due to it taking up 25% of the navbar) and also automatically shrunk the logo on smaller screens. To combat this I have now kept the logo as the mark/badge without the typography and assigned it a hard-coded size of 64px to prevent it from shrinking on smaller screens.