What could be causing the menu to not align in the center?

Take a look at the HTML code below:

<!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.0">
    <title>Blissful Blend</title>
    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368766874">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"gt;
    <!--Custom CSS-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark d-flex">
    <div class="container-fluid">
      <a class="navbar-brand logo ps-5" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class=" navbar-nav justify-content-center">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">What's New</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2d213c2b0e7c6077607c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c829c80">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

Below is the CSS for the design:

/*Poppins Font*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100&display=swap");

body {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  background-color: #622175;
}

/*Navbar*/
.navbar {
  background-color: #622175;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.logo {
  font-size: 50px;
}

I have attempted various methods using both regular CSS and Bootstrap classes as mentioned in the documentation but I am unable to get the desired result. Specifically, adding the class "justify-content-center" and ensuring the logo stays on the left are causing issues. Any suggestions on how to resolve this?

htmlcssbootstrap-5

Answer №1

Here's a suggestion:

HTML :

<!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.0">
    <title>Blissful Blend</title>
    <!--Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a948a96">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!--Custom CSS-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark d-flex">
    <div class="container-fluid">
      <a class="navbar-brand logo ps-5" href="#">LOGO</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div style="justify-content: center;" class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class=" navbar-nav justify-content-center">
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link" href="#">Menu</a>
          </li>
          <li class="nav-item">
            <a style="text-align: center;" class="nav-link" href="#">What's New</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c0ccd1c6e3918d9a8d91">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562338263824">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

CSS:

/*Poppins Font*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;1,100&display=swap");

body {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  background-color: #622175;
}

/*Navbar*/
.navbar {
  background-color: #622175;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.logo {
  font-size: 50px;
}

To center your menu items, add 

style="text-align: center;"
to each of your menu <a> tags. The final result should look something like this: https://i.sstatic.net/Esht5.png

And it will ultimately look like this: https://i.sstatic.net/mwZsh.png

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

MultiArray authentication system

I am currently working on a multi-array login system, but I am facing an issue where only the first account is functioning properly. The other two accounts are displaying incorrect password or username errors. Account 1 corresponds to the name, Account 2 ...

phphtmllogin-script

Tips on solving the Navigation bar burger problem with HTML and CSS

## I am having trouble making my navigation bar responsive using HTML and CSS as the navigation burger does not appear in mobile view ## To take a look at my code on jsfiddle, click here: [jsfiddle] (https://jsfiddle.net/abhishekpakhare/nxcdso7k/1/ ...

htmlcssresponsive-designnavigationbar

Struggling to link an external JavaScript file to your HTML document?

While attempting to run a firebase app locally, I encountered an error in the chrome console: GET http://localhost:5000/behaviors/signup.js net::ERR_ABORTED 404 (Not Found) Do I need to set firebase.json source and destination under rewrites or add a rout ...

javascriptnode.jshtmlfirebaseexpress

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Currently, I am working with React and material-ui. Specifically, I am utilizing an appbar with tabs and my goal is to have the content of each tab expand to full width and height when selected. If you'd like to see an example, check out this sandbox ...

javascripthtmlcssreactjsmaterial-ui

Why is it that Lotus Notes is unable to render this HTML code properly?

I am having trouble with an email that displays properly on every platform except Lotus Notes. Can anyone provide insight as to why this email is not rendering correctly in Notes? Here is a screenshot: img (please note the images are for demonstration pu ...

htmlcsshtml-tablehtml-emaillotus-notes

Issues with Implementing Bootstrap Dropdown Menu in Django

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

htmlcssdjangobootstrap-4django-templates

Tips for entering the lowest and highest values into the input field

I am looking to track the daily minimum and maximum prices of shares for various companies. Currently, I'm attempting to utilize this tag: <input type="number" name="number" placeholder="minprice"> <input type="number" name="number" place ...

htmlcss

Trouble with disabling default actions and transferring text

When the user clicks on loginAccount, the intention is to extract the text from the element with the id input-1 and assign it to username. This same process should occur for password, followed by form submission. However, despite using e.preventDefault() ...

javascriptjqueryhtmlajaxforms

How can I reset the mousemove event in jQuery?

I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...

javascriptjqueryhtmlcssmousemove

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

javascriptjqueryhtmlcssajax

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

javascriptcssfeature-detection

Incorporating a YouTube channel into mobile websites

While it's relatively easy to embed single YouTube videos in mobile pages with the help of Google, I'm still struggling with embedding a whole channel. The issue seems to revolve around the screen width, and my attempts at using JavaScript have n ...

javascripthtmlmobile

Element in the Middle

I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...

htmlcss

Height of the div dynamically increases upwards

Just a quick question - is there a way to make position: fixed divs at the bottom of an element (such as the body) grow upwards as content is dynamically added? Maybe something like anchor: bottom or increase: up? I'm thinking that using JavaScript m ...

javascriptjqueryhtmlcss

Pop-up alert for text sections that are longer than a specific character limit

As I work on a website featuring dynamically generated blog posts of varying lengths, I'm looking to restrict the height of each post to 250px. Should a post exceed this limit, I want to truncate it and include a "read more" link that opens a modal ov ...

javascriptjqueryhtmlcss

Caution: The file_get_contents function call cannot be processed as the filename is missing

Every time I attempt to upload an image, I encounter the following error: Warning: file_get_contents(): Filename cannot be empty Here is the code causing the issue: <?php $ImageName = $_FILES["file"]["name"]; $ImageType = $_FILES["file"]['type&a ...

phphtmlmysqlfile-upload

What could be the reason behind the occurrence of an error after deleting certain lines of code

The code below is functioning correctly. obj = { go: function() { alert(this) } } obj.go(); // object (obj.go)(); // object (a = obj.go)(); // window (0 || obj.go)(); // window However, an error arises when I comment out the first two lines. obj ...

javascripthtml

What is the best way to add an additional argument to a Django URL?

In my views.py for page1.html: def spwords(request, spray_id) if request.method == 'POST': value= request.POST["rangeVal"] #### the other argument that I want to pass to views.py of the second page html ... form = forms. ...

htmlpython-3.xdjangodjango-viewspython-requests-html

Tips for bridging the space between jumbotron and about section using Bootstrap

How can I eliminate the gap between the jumbotron and the about section? I have attempted to reduce the margin between the two sections, but it is not working properly. <section id="atas"> <div class="jumbotron jumbotron-flu ...

htmlcssbootstrap-4

The segmented button's dropdown menu in Bootstrap is malfunctioning on Firefox version 27.0.1

I'm attempting to create a basic search bar using Bootstrap's segmented button feature (check out an example at http://getbootstrap.com/components/#input-groups-buttons-segmented). This is the code I have so far, and it's accessible on jsfi ...

jqueryhtmlcsstwitter-bootstrap