Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, but nothing seems to be working for me. The desired outcome is similar to this https://i.sstatic.net/zoiQe.jpg

You can access a small demo here

Thank you very much, Andreea.

.header-nav-fixed-down {
  height: 60px;
  padding: 20px;
  background-color: #2c3642;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.divider {
  width: 1px;
  height: 30px;
  background-color: #000000;
}

div#navbarCollapse ul li a{
    color: grey !important;
}
<!DOCTYPE html>
<html lang="en"><head>
        <meta charset="utf-8>
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 4 Navbar with hover multi dropdown</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

        <link href="css/bootstrap-4-hover-navbar.css" rel="stylesheet">


       
    </head>
    <body>

<nav class="navbar navbar-expand-md fixed-down header-nav-fixed-down ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav m-auto">
            <li class=" nav-item ">
                <a href="#">ItemA</a>
            </li>
            <li role="separator" class="divider m-auto"></li>
        </ul>
        <ul class="navbar-nav m-auto">
            <li class="nav-item">
                 <a href="#">ItemB.1</a>
            </li>
            <li class="nav-item">
                <a href="#">ItemB.2</a>
            </li>
            <li class="nav-item">
                 <a href="#">ItemB.3</a>
            </li>
            <li role="separator" class="divider"></li>
        </ul>
        
        <ul class="navbar-nav m-auto">
            <li class="nav-item">
                 <a href="#">ItemB.1</a>
            </li>
            <li class="nav-item">
                <a href="#">ItemB.2</a>
            </li>
            <li class="nav-item">
                 <a href="#">ItemB.3</a>
            </li>
            <li role="separator" class="divider"></li>
        </ul>
       
        <ul class="navbar-nav m-auto">
            <li class="nav-item">
                 <a href="#">ItemD</a>
            </li>
           
            <li role="separator" class="divider"></li>
        </ul>
         <ul class="navbar-nav m-auto">
            <li class="nav-item">
                 <a href="#">ItemE1</a>
            </li>
            <li class="nav-item">
                 <a href="#">ItemE2</a>
            </li>
            <li role="separator" class="divider"></li>
        </ul>
         <ul class="navbar-nav m-auto">
            <li class="nav-item ">
                 <a href="#">ItemF1</a>
            </li>
            <li class="nav-item ">
                 <a href="#">ItemF2</a>
            </li>
            <li role="separator" class="divider"></li>
        </ul>
    </div>
</nav>


        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

        <script src="js/bootstrap-4-hover-navbar.js"></script>
    

</body></html>

Answer №1

If you're looking to create a flexible navigation container, Flexbox is the way to go. This will allow your navigation items to flex and give you control over their direction (vertical or horizontal) as well as their alignment within the container (start, center, end). The beauty of Flexbox is its responsiveness - as the screen size changes, the list items within the navigation will flex and adapt to fit the available space seamlessly. To get started, try implementing the following CSS:

.navigation {
   display: flex;
   justify-content: space-evenly;
   align-items: center;
 }

Answer №2

<nav class="navbar navbar-expand-md fixed-down header-nav-fixed-down ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav m-auto">
            <li class="nav-item border-right px-4 ">
                <a class="nav-link" href="#">ItemA</a>
            </li>
            <li class="nav-item px-4 ">
                 <a class="nav-link" href="#">ItemB.1</a>
            </li>
            <li class="nav-item px-4 ">
                <a class="nav-link" href="#">ItemB.2</a>
            </li>
            <li class="nav-item border-right px-4 ">
                 <a class="nav-link" href="#">ItemB.3</a>
            </li>
            <li class="nav-item px-4 ">
                 <a class="nav-link" href="#">ItemC.1</a>
            </li>
            <li class="nav-item px-4 ">
                <a class="nav-link" href="#">ItemC.2</a>
            </li>
            <li class="nav-item border-right px-4 ">
                 <a class="nav-link" href="#">ItemC.3</a>
            </li>
            <li class="nav-item border-right px-4 ">
                 <a class="nav-link" href="#">ItemD</a>
            </li>
            <li class="nav-item border-right px-4 ">
                 <a class="nav-link" href="#">ItemE1</a>
            </li>
            <li class="nav-item border-right px-4 ">
                 <a class="nav-link" href="#">ItemE2</a>
            </li>
            <li class="nav-item px-4 ">
                 <a class="nav-link" href="#">ItemF1</a>
            </li>
            <li class="nav-item px-4 ">
                 <a class="nav-link" href="#">ItemF2</a>
            </li>
        </ul>
    </div>
</nav>

Reducing the <ul class="navbar-nav"> elements would streamline the code. Consider removing the right border where it's not needed.

Don't forget to add the nav-link class to nested anchors to make them functional links. If an item is not supposed to be a link, you can use the nav-text class instead.

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

Embedding a YouTube video in a view player using HTML5

So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...

PHP allows for creating dropdown lists where the values are dynamically dependent on the selection of another dropdown list within the same form

Is there a way for me to implement this solution? The values in the dropdownlist are based on another dropdownlist within the same form. For example, a form with dropdownlists for car names and models of that car, along with a search button. Please take no ...

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...

How can I position a div column-10 to the right and make it stay fixed in place

I'm having an issue trying to position a div on the right side without causing content to overlap with the navbar. I've attempted using `position:absolute top:0 right:0`, but it's not working as intended. <link href="https:// ...

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...

Adjust image size dynamically while keeping the original aspect ratio

Is there a way to scale variable portrait and landscape images dynamically to fit proportionally within a browser window? You can find my current image resizing attempt here: http://jsfiddle.net/6pnCH/4/ I would like the image to be already scaled vertic ...

Stop the selection of text within rt tags (furigana)

I love incorporating ruby annotation to include furigana above Japanese characters: <ruby><rb>漢</rb><rt>かん</rt></ruby><ruby><rb>字</rb><rt>じ</rt></ruby> However, when attemp ...

The selenium element for the submit button is currently not responsive to interactions

Recently, I encountered some challenges with selenium, specifically the anticaptcha API. Although I managed to resolve that issue, I am currently facing a different problem. Below is my existing code: from time import sleep from selenium import webdriver f ...

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

Text animation that rises smoothly within a concealed overflow region

I'm currently trying to replicate the effect seen in this example: Specifically, I am referring to the text that reads "CREATIVE AGENCY FOR DARING BRANDS" Although it appears simple, I am having trouble figuring out how to achieve it. I primarily wo ...

Trouble with bringing in the solana/web3.js library

After successfully importing the solana/web3.js package and running it within a NodeJS file, everything was working fine. However, things took a turn when attempting to connect this file with basic HTML, resulting in an error being thrown. import { Tra ...

Video player on website experiencing issues with playing VAST ads

Hey there! Check out this awesome site for Music Videos: (Music Videos(Player)) I've been testing different options, but if you have a better suggestion, please let me know. Any help would be really appreciated. If I can't figure it out on my o ...

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

Is it possible for iText 5 to convert PDF files into HTML format?

My latest project involved using iText 5 to generate a visually appealing report complete with tables and graphs. Now I'm curious to know if iText also has the capability to convert PDF files into HTML format. If it does, how would one go about doing ...

Clicking on the modal will trigger its closure

Is there a way to prevent Bootstrap 4 modal from closing when the user tries to leave the page but clicks on it instead? I have attempted various solutions from this platform, but none have worked for me. I am running out of ideas. This snippet shows my ...

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

Transform the input value into a string

Struggling with converting an input value into a string. HTML: <input type="text" placeholder="Email Ex: john123" id="emailinput"> <input type="text" placeholder="Domain Ex: @gmail.com" id="domaininput"> JS: let emailVal = document.getElem ...

Has Apache initiated a forced logout process?

Running a LAMP server, I have implemented Apache basic authentication to log in users accessing the server homepage. I am currently seeking a way to enforce user logout, but my attempts with mod_session & mod_auth_form have not been successful. The page ...

Unable to get compatibility mode IE to work as intended

I am facing an issue where I need to showcase a webpage in compatibility mode. Despite using the code below: <meta http-equiv="X-UA-Compatible" content="IE=11"> It seems like this code only functions if compatibility mode is already enabled. In tha ...