How to center navbar-brand in mobile devices

Forum|Forum|5 years ago
February 4, 2021
2 replies
3280 views

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!

This topic has been closed for replies.

Correct answer osgood_

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.

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>

Nancy OShea

Community Expert

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

B

beng2000Author

Known Participant

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!

B

beng2000Author

Known Participant

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

O

osgood_

Legend

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>

B

beng2000Author

Known Participant

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded