CSS Flexbox Navbar

1

This is a new Flexbox navbar that I am designing for a pre-existing website.

I have a couple of questions regarding the CSS.

.navbar-brand>img {
  height: 100%;
  padding: 5px 15px 5px 5px;
  width: auto;
  margin: center;
}

  1. What are the width and margin achieving here? When I remove them nothing appears to change…

  2. How do I center the logo when the screen width drops below 768px? What is stopping me from doing this?

Any help would be greatly appreciated. Thanks.

2

width is auto by default, so removing it in the code has no effect. I don’t think center is a valid value for margin, so the browser ignores it.

The navbar-brand class is defined in bootstrap and gives the element a float: left property. It’s what’s stopping you from centering the logo. You can try overriding this by adding float: unset in your CSS. Then you should be able to center the image by setting display: block; margin: auto;. Don’t forget to add display: block to the containing <a> element.

You also have img in the middle of the <img> tag (which shouldn’t be there). You also shouldn’t use the center attribute in the HTML (as in <p align="center">...).

2 Likes
3

Hi Kev,

I have applied the changes you suggested but it doesn’t seem to work (even when adding !important).

I know that using the center attribute in the HTML is bad practice but it is the only way I am able to get it to work.

I have also managed to centre the logo by adding align="center" to the navbar-header div and then adding width: 100% to the navbar-brand css.

However, I recognise that this is not good and so am continuing to look for a better solution…

4

It’s the image that should have margin:auto, not the <a> element.

1 Like
5

And now it works! Thank you Kev. Much appreciated.

Could you help with properly centering the title? I have now tried the same attributes in the css without any luck…

Ideally, I would also like to override Bootstrap dropping below the logo at 768px width (I would like to reduce it to 500px.)

6

Sorry I don’t quite understand :confused:. What title? You mean centering “Gestión de Informadores” using CSS?

7

Apologies for the lack of clarity.

Yes, that’s correct. And, ideally, I would also like to override Bootstrap dropping it below the logo at 768px width. I would like to reduce that number to 500px so that it remains alongside the logo whilst it still has sufficient room.

8

Use text-align: center.

I’m looking into it. I might not solve it though

9

So using text-align is okay here because it is text rather than an image that we are aligning?

Or is it because the image had a defined class for it’s attributes??

It’d be fantastic if you could solve the 768px adjustment problem as this isn’t the first time that I’ve encountered the problem and I’m sure it won’t be the last!

10

Ok, I found that .navbar-header also applies float:left to the element where it’s attached, but only when the viewport’s at least 768px wide.

I tried changing your media query from min-width: 768px to 500px then added .navbar-header { float: left; } there, but everything looks squished below 600px. You might have to settle for min-width: 600px instead.

1 Like
11

That’s brilliant Kev. You’re a star!

12

Okay, one last thing I’ve just noticed!

The logo is also making unwanted adjustments at 768px. I can’t quite work out what is happening though…

Any idea?