Bootstrap4 navigation bar featuring a collapsible centered logo and two rows for enhanced functionality

Can you help me customize my Navbar for a 2-row layout?

                        CompanyLogo                  link  link  link
-----------------------------------------------------------------------
 link(dropdown)        link       link      link      link      link

I want the company logo to be centered with the upper 3 links aligned to the right. The upper 3 links should collapse into the logo when clicked.

The entire second row should be aligned center and collapsible. Below is the code I have:

<html>
<div class="header" style="margin-bottom:0">
           <a class="logo" href="#default">CompanyLogo</a>
           <div class="header-right">
           <a href="#countryicon">country</a>
           <a href="#lang">language</a>
           <a href="#signup">
           <img border="0" alt="signup" src="Sign up icon png.png" width="30" 
            height="30">
           </a>
           <a href="#signin">
           <img border="0" alt="signup" src="Sign in icon png.png" width="30" 
             height="30">
           </a>
           </div>
        </div>

        <nav class="nav navbar">
         <ul class="nav justify-content-center">
           <li class="nav-item">
               <a class="nav-link" href="#">Categories</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Home</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Live Auction</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">Make Your Wish</a>
           </li>
           <li class="nav-item">
               <a class="nav-link" href="#">How it Works</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Purchase Bid Credits</a>
           </li>
           <li class="nav-item">
                <a class="nav-link" href="#">Contact us</a>
           </li>
          </ul>
        </nav>
        </html>

htmlcssbootstrap-4

Answer №1

Note: The concept of "the upper 3 links collapsing into the logo" was unclear to me, so I have placed them with the rest of the navbar items on small screens.

HTML

The HTML structure of the navbar is fairly straightforward. For detailed implementation, you can refer to the Bootstrap documentation.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a href="#" class="navbar-brand">
    CompanyLogo
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav upper-controls">
      <li class="nav-item">
        <a class="nav-link" href="#">Country</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Language</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up | Sign in</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          Categories
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item">Cat 1</a>
          <a class="dropdown-item">Cat 2</a>
          <a class="dropdown-item">Cat 3</a>
          <a class="dropdown-item">Cat 4</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Live Auction</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Make Your Wish</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">How it works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Purchase Bid Credits</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

On small screens

Without a clear definition of the behavior for the 3 upper links, they have been positioned before the other navbar items. To center the logo, justify-content: center; has been applied to the navbar. Additionally, the button toggler has been positioned absolutely to allow for proper alignment.

CSS

/* center the logo */
.navbar {
  justify-content: center;
}

/* position the button toggler */
.navbar .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: .5rem;
}

/* center all navbar items */
.navbar-nav {
  align-items: center;
}

Result

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

On larger screens (> 992px)

For screens larger than 992px, the navbar's flex-flow has been modified to display in 2 rows. The upper 3 links have been assigned absolute positioning for consistent behavior across screen sizes.

CSS

/* adjustments for large screens */
@media(min-width: 992px) {
  /* display in 2 rows */
  .navbar-expand-lg {
    flex-flow: column nowrap;
  }  

  /* position the upper links */
  .navbar-nav.upper-controls {
    position: absolute;
    right: 1rem;
    top: .5rem;
    font-size: 85%;
  }
}

Result

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

fiddle: https://jsfiddle.net/aq9Laaew/257205/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

Exploring all the options within a dropdown menu using JQuery

Within the MVC 4 view, there is a dropdown box that, when its value changes, needs to capture all selected values. Each selection consists of three items: the Id, the visible value on the form, and a path to a file. While the functionality works for readin ...

javascriptjqueryhtmldrop-down-menu

Steps to Import an Image from a Subdirectory:

Currently, I am working on C# and HTML. While working on a view page, I encountered an issue when trying to load images from subfolders. When attempting to load an image from the immediate folder, it opens correctly. For example: <img data-u="image" s ...

c#html

How to retrieve the time duration in minutes between a start and end time in JavaScript to

I have conducted a thorough search on Stack Overflow and other platforms but could not find an answer to my specific question. While I did come across posts related to this topic, they did not address the issue I am facing. Problem: My challenge involves ...

javascripthtml

Customize Text Area's Font Based on Selected Option in Dropdown List

I'm currently working on an HTML file that includes a dropdown list and a text area. Here's the code snippet: <select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'> <option value = ' ...

javascripthtml

Creating a transparent background for a Canvas animation with three.js and dat.gui

I'm struggling to set up a background animation on this canvas using three.js. However, the background renders as black instead of transparent. I attempted to adjust it with CSS by adding background-color:transparent;, but to no avail. I've searc ...

javascriptcsscanvasthree.jsdat.gui

The issue arises when the ng-hide directive fails to function properly due to the presence of a custom directive with the terminal option

Below is the code for my button: <button ng-hide="todo === 'add'" confirm-click ng-click="delete()">Delete</button> This is the directive implementation: (function(app) { app.directive('confirmClick', function(){ ...

htmlangularjsangularjs-directiveng-hide

Create a layout using CSS that features two columns. The left column should be fluid, expanding to fill all remaining space, while the right column should be fixed

I need to ensure that the Online Users div always remains at a fixed size of 200px, while allowing the chat window next to it to resize dynamically based on available space. Essentially, I want the chat window to adjust its width as the window is resized, ...

javascripthtmlcss

Attempting to imitate the hover effect of a scroll-down button

Looking for advice on creating a scroll down button with a hovering effect similar to the one found on this website - . Any tips or suggestions would be greatly appreciated. ...

jquerycss

Displaying a popup modal in Blazor client side

While I know about Blazored Modal and have read this answer, I prefer not to use a specific component solely for displaying modals due to its limitations. Instead, I want to incorporate modal functionality into different components on my own. Below is a s ...

bootstrap-4blazor

Ways to conditionally display a component in Next.js without the issue of caching CSS styles

I'm a newcomer to Next.js and I'm still trying to wrap my head around how the caching works. Let's take a look at this simplified example: An index page that displays either Test1 or Test2 components, based on whether the current minute is ...

csstypescriptcachingnext.js

Revamp the website's design

I am looking to revamp the color theme of my website with just a click of a button. Can someone provide me with a link to a reference website where I can get some inspiration? ...

javascriptcssajax

jQuery not functioning properly for adjusting quantities with plus and minus buttons

Hey there, I've been trying to create a number input increment using jQuery but haven't had any luck so far. Could you please take a look at my code and provide some guidance? CHECK OUT THE DEMO HERE Here's the HTML: <div class="sp-qua ...

jqueryhtmlcss

Php Error 404 occurs upon attempting to redirect from the main landing page

I have been encountering an issue while trying to add links to different pages of my website. Whenever I click on the link, it displays a "404 Page Not Found" error message. Objective: My main goal is to create links from my home page, index.php, to other ...

phpindexinghyperlinkhtml

I am currently attempting to find a color picker element within a parent class using Cypress CSS Locator. While I am able to reach the parent element, I am unsure of the correct method to target the

My user interface has a list of elements displayed in 2 columns. The first column shows the name of the item, such as Manager, Operator, and the list is expected to grow. The second column consists of a color picker element where you can choose a color. I ...

javascriptcssselenium-webdrivercypress

Feature for jotting down notes, creating a break between lines without any information present

I'm currently working on implementing a note-taking feature for my web application. However, I have encountered two issues: Firstly, I am struggling to identify line breaks within the text. While I can hardcode text with line breaks, when a user clic ...

javascriptjqueryhtmlcssbootstrap-4

Determine the position of the cursor in an editable span

Is there a way to add text at the cursor position in an editable span when a button is clicked? The span contains multiple lines of text and HTML tags. [Take a look at this example on JSFiddle](http://jsfiddle.net/8txz9sjs/) ...

javascriptjqueryhtml

Send form data without reloading the page and connect it to a JavaScript script

I've designed a system that reveals values based on a specific input selection. Below is the main form where users can enter model numbers and press enter: <form> <input type="text" name="ModNum" id="ModelNumber" pattern="^PIV13RT[23]?$" ...

javascriptjqueryhtmlajaxforms

Is there a way to easily toggle a Material Checkbox in Angular with just one click?

Issue with Checkbox Functionality: In a Material Dialog Component, I have implemented several Material Checkboxes to serve as column filters for a table: <h1 mat-dialog-title>Filter</h1> <div mat-dialog-content> <ng-container *ng ...

htmlangulartypescriptangular-material

Fully compatible with Internet Explorer 6, with a height of

Is there a way to create a div that is always 100% the height of the browser, even if it's empty, and works in IE6? Any suggestions or hacks using CSS? ...

cssinternet-explorer-6