Facing a problem with navbar

1

I’m currently doing the second front end development project. I am facing a problem with the navigation bar.

32 PM
32 PM942×1480 34.9 KB

As you can see, the burger icon does not seem to get centered on the navbar. But when I set the image height to 30px it does.(previously it was 40px )
55 PM
55 PM940×1484 34.6 KB

But I want to keep the height 40px and center the icon. How do I do that?
Here is the pen:

2

Since your navbar is using a display: flex property, simply adding a

justify-content: center should do the trick.

Hope it helps :+1:

1 Like
3

Where do I put this?

4

anywhere that your navbar see it:

so far in your project your nav is:

<nav class="navbar navbar-toggleable-sm navbar-light" 
 style="background-color:purple;"
>

so you can add it to the navbar class for example:

//css
.navbar {
 justify-content: center
}

or straight inline in style:

style="background-color:purple; justify-content: center"

Up to you and where you thinks makes more sense project-wise

1 Like
5

But I have encountered another problem. When I click on the burger icon this happens:

48 PM
48 PM936×1478 30.5 KB

What do I do about this?

6

Even according to Bootstrap documentation:

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

So you likely have to play around with the image positioning. Even in their examples they always give the img brand a 30px width and height, it’s probably due to how big is the navbar by default.

My best bet if you want to achieve a custom width/positioning of the image is by wrapping the content of the navbar inside rows and column (grid systems) and work your positioning that way :slight_smile:

7

Thank you very much. I’ll give it a try.