Maintaining the integrity of items in a Bootstrap 4 Navbar and ensuring their center alignment

Question

Maintaining the integrity of items in a Bootstrap 4 Navbar and ensuring their center alignment

I am currently working on developing a mobile website using ReactJS and Bootstrap 4. One of the requirements is to create a Navbar with specific functionalities.

Normal

Normal Menu:

https://i.sstatic.net/DXfIt.png

Collapse

Collapse Menu:

https://i.sstatic.net/LcZaH.png

While I have managed to exclude certain items from the collapse menu by placing them in a separate div within the NavBar, the output does not meet my desired appearance. Additionally, when the NavBar expands in collapse mode, it pushes down the content below it, which is not the behavior I want. As there's a logo positioned above the NavBar, using fixed-top is not feasible. The code snippet below shows what I have implemented so far:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa8a958a8a9f88d49089bacbd4cbccd4cb">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo">
<nav class="navbar navbar-dark navbar-expand-lg navbar-template">
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto bg-dark">
            <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Account</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Send</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
            <li class="dropdown-divider"></li>
            <li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
        </ul>
    </div>
    <div class="d-flex flex-row order-2 order-lg-3">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
        <ul class="navbar-nav flex-row">
            <li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
            <li class="nav-item ml-auto"><img class="nav-link px-2" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></li>
        </ul>

    </div> 
</nav>
<div class="container"></div>

Are there any solutions available to achieve the required Navbar implementation? Specifically, ways to exclude certain items from the collapse menu, adjust the position of some items when the Navbar collapses, and prevent it from pushing down the content below?

html css reactjs bootstrap-4

Answer 1

Answer №1

If you want to customize your webpage layout, you can use media queries to hide certain elements and display others based on the screen size.

Firstly, I created a separate container for your main logo to ensure it stays fixed at the top of the page.
Secondly, I moved the collapse button out of the div you inserted previously.
Thirdly, I added two new divs after the main menu to show additional elements when the screen width is less than 992px.
Finally, I included "My Name" in your main menu and adjusted the display properties accordingly.

To ensure everything functions correctly, make sure to replace all instances of class with className.

I hope these modifications align closely with your requirements.

.container-logo{
  width:100%;
  display:flex;
  justify-content: center;
}
#navbarNavDropdown{
  position: absolute;
  top: 116px;
}
ul.navbar-nav{
  padding: 0 15px;
}
@media (min-width: 992px){
  #navbarNavDropdown{
    position: relative;
    top: 0;
  }
  ul.navbar-nav{
    padding: 0;
  }
  .d-lg-list-item {
      display: list-item!important;
  }
}

.logo-main{
  width:100px;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71011e010114035f1b0231405f40475f40">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-logo">
    <img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo" />
  </div>

  <nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-template">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto bg-dark list-unstyled">
        <li class="nav-item"><a to="/main/menu" class="nav-link">Dashboard</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Account</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Send</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
        <li class="dropdown-divider"></li>
        <li style="display:none;" class="d-lg-list-item nav-item"><a class="nav-link" href="#">My Name</a></li>
        <li style="display:none;" class="d-lg-list-item dropdown-divider"></li>
        <li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
      </ul>
    </div>
    <div class="d-lg-none mx-auto"><a class="nav-link" href="#">My Name</a></div>
    <div class="d-lg-none"><img class="logo-main" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></div>
      
      <!--<div class="flex-row order-2 order-lg-3">
          
          <ul class="navbar-nav flex-row list-unstyled">
              <li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
              
          </ul>

      </div> -->
  </nav>
  <div class="container">
    Insert Lorem Ipsum text here
  </div>
</body>

Answer 2

If you want to customize your webpage layout, you can use media queries to hide certain elements and display others based on the screen size.

Firstly, I created a separate container for your main logo to ensure it stays fixed at the top of the page.
Secondly, I moved the collapse button out of the div you inserted previously.
Thirdly, I added two new divs after the main menu to show additional elements when the screen width is less than 992px.
Finally, I included "My Name" in your main menu and adjusted the display properties accordingly.

To ensure everything functions correctly, make sure to replace all instances of class with className.

I hope these modifications align closely with your requirements.

.container-logo{
  width:100%;
  display:flex;
  justify-content: center;
}
#navbarNavDropdown{
  position: absolute;
  top: 116px;
}
ul.navbar-nav{
  padding: 0 15px;
}
@media (min-width: 992px){
  #navbarNavDropdown{
    position: relative;
    top: 0;
  }
  ul.navbar-nav{
    padding: 0;
  }
  .d-lg-list-item {
      display: list-item!important;
  }
}

.logo-main{
  width:100px;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71011e010114035f1b0231405f40475f40">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-logo">
    <img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo" />
  </div>

  <nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-template">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto bg-dark list-unstyled">
        <li class="nav-item"><a to="/main/menu" class="nav-link">Dashboard</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Account</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Send</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
        <li class="dropdown-divider"></li>
        <li style="display:none;" class="d-lg-list-item nav-item"><a class="nav-link" href="#">My Name</a></li>
        <li style="display:none;" class="d-lg-list-item dropdown-divider"></li>
        <li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
      </ul>
    </div>
    <div class="d-lg-none mx-auto"><a class="nav-link" href="#">My Name</a></div>
    <div class="d-lg-none"><img class="logo-main" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></div>
      
      <!--<div class="flex-row order-2 order-lg-3">
          
          <ul class="navbar-nav flex-row list-unstyled">
              <li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
              
          </ul>

      </div> -->
  </nav>
  <div class="container">
    Insert Lorem Ipsum text here
  </div>
</body>

Maintaining the integrity of items in a Bootstrap 4 Navbar and ensuring their center alignment

Answer №1

Similar questions

Having Trouble Scooting Down the Page on Mobile?

Finding the error with posts.map can be tricky, especially when you assume that the data is already

How can you specify the maximum width and height for a TextField in JavaFX using CSS?

Aligning a series of images with individual captions in the center

Map / Area enveloped in darkness

Encountering insurmountable obstacles in accessing AliExpress

Modify the css with JQUERY when there are no rows inside the tbody section

Finding text outside of a HTML tag with jsoup

React textarea trigger function on blur event

Experiencing Troubles with Design Customization in Flowbite-React

Guide to testing Higher Order Components with React Testing Library

Designing a customizable header/banner for user personalization

Encountering an issue where the TextField type date in React Material-UI and Formik does not update correctly after receiving data from the server

What could be causing my component to not update after I modify the states?

Include some extra margin or padding to ensure the section is visible below the fixed navbar

What steps should we take to address our client's aversion to pop-up advertisements?

Performing Jquery functions on several elements at once

What was preventing Cypress from reading my CSS variables?

What causes the Invalid hook call error in react-router-dom?

What are the steps to integrate the Vimeo oEmbed API into a nodejs application?