Centering logo above bootstrap Navbar

Hello.

I’m trying to center my logo above the navbar below 768px wide.
I think i have some conflicting css because it stays on the left.

Also, Safari is showing the logo on the right/off screen.

Here is my site.
http://davidkwhittemore.com/here/index.html

Thanks.

The .navbar is fixed at viewport top and contains the logo, the hamburger and the hidden menu below it.
The .logo is positioned left.
The hamburger and the expandable menu column are aligned right.

Do you mean: The .logo centred at the top, not overlapping the .navbar-nav space below?

What about the menu button?
As the hamburger/menu column goes right, do you want the logo in level with the hamburger or maybe also the whole menu in specified viewport widths?

Are those parts placed exactly where you want them at other widths?

Yes, I think the navbar css is a mess. :slight_smile:

As Erik said above there are many questions to resolve first but as a start you can centre the logo like this:

@media screen and (max-width:768px){
#logo{margin-left:auto;margin-right:auto;left:0;right:0;}
}

However at about 420px the logo will overlap the right menu so you will need another media query to make the logo smaller or move it again.

You are probably better making the logo smaller at 768px width and then just centring it inline with the menu rather than putting it above the menu,

e.g.


@media screen and (max-width:768px){
#logo{margin-left:auto;margin-right:auto;left:0;right:0;width:160px}
#logo img{width:160px;height:auto}
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.