Skip to main content
Known Participant
February 4, 2021
Answered

How to center navbar-brand in mobile devices

  • 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>

     

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    February 4, 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
    beng2000Author
    Known Participant
    February 4, 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!

    beng2000Author
    Known Participant
    February 4, 2021

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

    Legend
    February 4, 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:

     

    <nav class="navbar navbar-expand-md bg-dark navbar-dark d-flex">

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

    beng2000Author
    Known Participant
    February 4, 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.