How to center navbar-brand in mobile devices

Report · Feb 04, 2021

Hello All.

I have been searching for an answer about centering my navbar-brand which has an image inside it for mobile devices.

My thought is that it might have to do with a media query that directs the nav-brand with the logo in it to go to the center of the navbar when it is viewed on a mobile device.

I have spent hours researching this. It's making me crazy. Does anyone know how to do this?

Thanks!

Report · Feb 04, 2021

I am using bootstrap 4. The logo has been inserted into the navbar-brand as a responsive image.

Report · Feb 04, 2021

It's not clear what you mean. Do you want your 'brand' in the center with the navigation links each side (which would be stupid on a mobile device, especially on a smartphone) or do you want the 'brand' sort of in the center, with the mobile hamburger icon to the right of it?

Try the below if you still want to keep the hamburger - add the Bootstrap css utilities classes marked in red:

<a class="navbar-brand flex-grow-1 flex-md-grow-0 text-center" href="#">Brand Name</a>

Report · Feb 04, 2021

Ok. I will try it. This is a screen shot of how my site looks now on my Samung 9. What I want is for the image that is in the navbar-brand to be centered on mobile devices. Hope this helps. Thank you.

Report · Feb 04, 2021

OK now I know what you want its much easier for me to give you a css solution:

Add the below to your page AFTER the link to the Bootstrap css file:

<style>
@media screen and (max-width: 768px) {
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-brand {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
.navbar-toggler {
display: block;
margin: 0 auto;
}
}
</style>

Failing that I'm sure that one of the Bootrappers in the forum will provide you with the built in Bootstrap css utility classes that you can add to your existing html code. I just find that all a bit messy so dont practice Bootstrap to that extent - I would need to look the classes up, whereas I can just bash this stuff out with my eyes closed using bespoke css.

Report · Feb 04, 2021

Thank you! It works.

The only thing I would like to change is to have the hamburger menu on the left. Is that possible?

Report · Feb 04, 2021

I'd also like there to be some space between the heart logo and the hamburger menu. Again I do want it to the left. Thank you.

Report · Feb 04, 2021

The below will give you some space between the heart logo and the hamburger icon and the hamburger will sit on the far right as the image you posted shows:

<style>
@media screen and (max-width: 768px) {
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-brand {
width: 100%;
text-align: center;
padding: 0;
margin: 0 0 30px 0;
}
.navbar-toggler {
display: block;
margin-left: auto;
}
}
</style>

Report · Feb 04, 2021

Very nice! Thank you. One of my goals is to right my own CSS.

Report · Feb 04, 2021

...and HTML 5 and Java script.

Report · Feb 04, 2021

Sorry did not see you wanted the hamburger on the left. You just need to use the css below. (No need to add any css for the 'navbar-toggler' container, that will sit to the left by default.

<style>
@media screen and (max-width: 768px) {
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-brand {
width: 100%;
text-align: center;
padding: 0;
margin: 0 0 30px 0;
}
}
</style>

Report · Feb 04, 2021

Try this in a new, blank document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-info main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Download</a></li>
<li class="nav-item"><a class="nav-link" href="#">Register</a></li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<!--BRAND-->
<li class="nav-item">
<a class="navbar-brand" href="#"><img src="https://dummyimage.com/300x65" alt="logo"></a></li>
<!--HAMBURGER ICON-->
<button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Rates</a></li>
<li class="nav-item"><a class="nav-link" href="#">Help</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 04, 2021

Hi Nancy. I love this layout. It works as well. I only want it in the middle on smaller mobile screens. I will hold on to this though and use it in a personal site I have to make for myself. I hope that is ok.

Thanks a bunch!

How to center navbar-brand in mobile devices

1 Correct answer

Photos