Twitter Bootstrap Question posted in

how to image center in Navbar Responsive?-Twitter bootstrap

It’s My code navbar

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark ">
    <div class="container">

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

      <div class="collapse navbar-collapse " id="navbarText">
        <ul class="navbar-nav mr-auto" style="
                  margin-right: 18%!important;
                  margin-left: 8%;
              ">
          <li class="nav-item">
            <a class="nav-link" href="#">Beranda</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Produk</a>
          </li>
        </ul>
        <ul class="navbar-nav mr-auto">
          <a class="navbar-brand" href="#">
            <img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
          </a>
        </ul>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">Tentang Kami</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Kontak</a>
          </li>
        </ul>


      </div>
    </div>

  </nav>

the result of the codingan looks like this picture
picture

but I want the result like this image
I want the result like this image

Please help me to solve this problem thank you.

Tags:

2

Answers


  1. 0

    Add more CSS and make changes according to your need.

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
        <style>
            @media (max-width: 991.98px){
                .navbar-brand{
                    display: none;
                }
                .navbar-brand-center{
                    display: flex;
                    justify-content: center
                }
                .center-logo{
                    width: 75%;
                }
              .nav-item{
                text-align: right;
                width: 113%;
             }
            }
            @media (min-width: 993px){
                .navbar-brand-center{
                    display: none;
                }
            }
            
        </style>
    </head>
    <body class="bg-dark">
        <nav class="navbar navbar-expand-lg navbar-dark ">
            <div class="container">
                <div class="center-logo">
                <a class="navbar-brand-center" href="#">
                    <img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
                </a>
            </div>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse " id="navbarText">
                    <ul class="navbar-nav mr-auto" style="
                        margin-right: 18%!important;
                        margin-left: 8%;
                        ">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Beranda</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Produk</a>
                        </li>
                        <li class="navbar-nav mr-auto">
                            <a class="navbar-brand" href="#">
                                <img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
                            </a>
                        </li>
                        <li class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Tentang Kami</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Kontak</a>
                            </li>
                        </li>
                    </ul>
                </div>

            </div>
            </div>
            
        </nav>
        
        
    </body>
</html>
    Login or Signup to reply.
  2. 0
    1. First step would be to add 2 <ul>. One will be visible on mobile screen and other on desktop.

    enter image description here

        For Mobile in the middle before the li
    <ul class="navbar-nav">
          <a class="image-logo" href="#">
            <img src="http://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" alt="mdb logo" height="52">
          </a>
    </ul>

    For Desktop
   <ul class="navbar-nav">
                  <a class="image-logo-center" href="#">
                    <img src="https://byhers.id/wp-content/uploads/2020/09/Logo-BYHERS-2.png" height="100" alt="mdb logo">
                  </a>
   </ul>

    1. Add your media queries in css.

        @media screen and (min-width: 992px) {
   .image-logo-center{
     height: 100px; 
     display: block; 
   }
   .image-logo{
     display: none;
   }
   }
   @media screen and (max-width: 500px) {
 .image-logo{
   position: absolute;
   height: 52px;
   top: 1%;
   left: 35%;
 }
 .image-logo-center{
   display: none;
 }
   }

    Full Code : https://codesandbox.io/s/optimistic-meadow-37ofm?file=/index.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search