Centered Navigation Bar Aligned with Header

I'm having trouble aligning my header vertically with the text in my nav-bar using Bootstrap 4.6. The nav-bar items are right-aligned, so the text isn't centered in the middle of the page like shown in picture 3.

.jumbotron {
  background: #37474F;
  color: white;
  padding: 10px;
  margin-top: -1.05rem;
  margin-bottom: 0;
}

.jumbotron h4 {
  margin-left: 40px;
  margin-right: auto;
  width: 30em;
  margin: 0 auto;
}

.navbar {
  margin-bottom: 0;
  background-color: #3F729B;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">

<div class="jumbotron jumbotron-fluid p-3">
  <h4>QC-19 : Le site officel de la réponse COVID-19 du Québec</h4>
</div>

<nav class="navbar navbar-expand-sm">
  <ul class="navbar-nav mx-auto">
    <li class="nav-item">
      <a class="nav-link" href="index.html">
        <fa-icon [icon]="faHome"></fa-icon> Accueil</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="vaccin.html">
        <fa-icon [icon]="faDisease"></fa-icon> Maladie</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.who.int/" target="_blank">
        <fa-icon [icon]="faSyringe"></fa-icon> Vaccin</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
        <fa-icon [icon]="faAllergies"></fa-icon> Prévention</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
        <fa-icon [icon]="faVials"></fa-icon> Test</a>
    </li>
  </ul>
  <span class="navbar-nav mx-auto">
        <a class="nav-link" href="https://www.icao.int/covid" target="_blank">OMS</a>
        <a class="nav-link" href="https://www.icao.int/covid">English</a>
    </span>
</nav>

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

htmlcssbootstrap-4

Answer №1

You have the option to implement it this way:

.jumbotron {
  background: #37474f;
  color: white;
  padding: 10px;
  margin-bottom: 0;
}

.jumbotron h4 {
  text-align: center;
  width: 30em;
  margin: 0 auto;
}

.box {
  margin-bottom: 0;
  background-color: #3f729b;
}

.navbar {
  width: 44%;
  margin: auto;
}

.navbar a {
  text-decoration: none;
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="jumbotron jumbotron-fluid p-3">
  <h4>QC-19 : Le site officel de la réponse COVID-19 du Québec
  </h4>
</div>

<div class="box">
  <nav class="navbar navbar-expand-sm">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="index.html">
          <fa-icon [icon]="faHome"></fa-icon> Accueil
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="vaccin.html">
          <fa-icon [icon]="faDisease"></fa-icon> Maladie
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.who.int/" target="_blank">
          <fa-icon [icon]="faSyringe"></fa-icon> Vaccin
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
          <fa-icon [icon]="faAllergies"></fa-icon> Prévention
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.icao.int/covid" target="_blank">
          <fa-icon [icon]="faVials"></fa-icon> Test
        </a>
      </li>
    </ul>
     <span class="navbar-nav mx-auto">
            <a class="nav-link" href="https://www.icao.int/covid" target="_blank">OMS</a>
            <a class="nav-link" href="https://www.icao.int/covid">English</a>
        </span>
  </nav>
</div>

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

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

If you want a more polished design, consider adding some media queries!

👉 View it in action on Codepen

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

The chosen options are not appearing. Could this be a problem related to AngularJS?

I am working on setting up a dropdown menu in HTML that includes only the AngularJS tag. This dropdown menu will be used to populate another AngularJS dropdown menu. Below is the code for the first dropdown menu: <select class="form-control" ng-model=" ...

javascripthtmlangularjs

Utilizing Robot Framework to select CSS attributes

The Selenium documentation provides an example of how to use Get Element Attribute: ${id}= Get Element Attribute css:h1 id However, I encountered a problem with this selector: ${VISIBILITY}= Get Element Attribute css:visibility mySidebar I ...

cssseleniumcss-selectorsrobotframework

The footer on my website refuses to stay in its designated

I have been searching online and tried the recommended solutions, but it seems like the footer is still overlapping my page. Does anyone know why this might be happening? footer { background: rgba(0, 0, 0, .93); I read on some forums that setting th ...

htmlcss

Is the CSS and jQuery plugin combination blocking the AJAX call or event listener from functioning properly?

After finally getting superfish to work, I encountered a problem where an ajax call would not trigger due to the event listener being prevented. By commenting out the plugin initialization, the event fired but with incorrect data. Any insights on why this ...

phpjavascriptjqueryhtmlcss

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

javascriptjqueryhtml

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

I have inserted an image using the following CSS code: .imgtemp { float:right; top:0px; left:0px; overflow:visible; width:100%; } Although I have added the div tag to display it on the page, ...

htmlcss

I would like to retrieve my data using my personal API and have them displayed as checkboxes

https://i.sstatic.net/qPSqe.jpgHere is an excerpt of the progress I have made main.html (it's actually a form) <div class="form-group form-check-inline"> <input class="form-check-input" type="radio" name=& ...

javascripthtmljsonapifetch-api

Learn how to dynamically add comments to HTML elements in AngularJS

Here is the meta tag that I have: <meta title='raja' identifier> I would like to know how to manipulate the DOM so it looks like this: <!-- reference <meta title='raja'> --> Could you recommend a way to manipulat ...

angularjshtml

Prevent the navigation bar text from being truncated

The below code snippet: <div data-role="navbar"> <ul> <li><a href="#page_1" data-transition="none">Heading 1</a></li> <li><a href="#page_2" class="ui-btn-active ui-state-persist">Heading 2</a& ...

cssjquery-mobile

Ways to decrease the space between lines of text within a single mat-option element

https://i.sstatic.net/Sr1cb.png ::ng-deep .mat-select-panel mat-option.mat-option { height: unset; } ::ng-deep .mat-option-text.mat-option-text { white-space: normal; } Currently, I have implemented this code to ensure that text in options wraps to t ...

htmlcssangular

Using TailwindCSS with Vite in a vanilla JavaScript project: A step-by-step guide

As a beginner, I feel like I'm losing my mind trying to figure this out. I've watched countless tutorials and read through numerous documents, but still can't seem to get it working. Does anyone have any advice on how to successfully integra ...

htmlcssnpmtailwind-cssvite

Loading AJAX content within the existing page instead of a pop-up window

My goal is to have the page links load in a popup, but after adding this script, the page loads at the bottom instead. How can I make it open in a popup window instead? $('a[rel="ajax:jmodal"]').click(function(event) { $.ajax({ url: $(this).a ...

phphtmlajax

Creating a CSS tooltip using only HTML and CSS may present some challenges and not function as intended

I've been attempting to create a basic tooltip using only CSS3 and HTML, but for some reason the transition isn't functioning. Can someone help me identify what I might be doing incorrectly? HTML Structure <p> This paragraph has a too ...

htmlcss

Alignment of Nested Accordions using BootStrap: Right Justified

I have a nested accordion that resembles the following structure: https://i.sstatic.net/HT6kS.png However, I am seeking to align them to the right so that all collapse arrows are in line. In my Plotly Dash implementation, the code looks like this: d = {& ...

cssaccordionplotly-dashbootstrap-5bootstrap-accordion

Attempting to alter the appearance of my validation control by implementing a custom style sheet theme

After naming a style sheet theme Basic and applying it to my web.config file, I created a Validator class in the css file. Utilizing the cssClass attribute with the Validator type, I successfully adjusted the font-weight property but struggled to change th ...

htmlcssasp.net

Add space between the first and second rows in the grid gallery display

.gallery{ display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) ); } view grid image here Could you assist me with identifying the spacing issue between the first and second ...

csscss-grid

Content in Bootstrap not filling entire mobile screen

The content in this form does not stretch to full screen on mobile phones, but it appears properly on computers and tablets. Please advise on how to solve this issue. https://i.stack.imgur.com/S2XkS.jpg <link rel="stylesheet" href="https://maxcdn.bo ...

phphtmlcssbootstrap-4bootstrap-modal

Bootstrap 4 Carousel: Displaying Multiple Frames Simultaneously and Sliding One at a Time

A different query was raised regarding the same issue (refer to the mentioned question) for Bootstrap 3, however, the suggested solutions are not compatible with Bootstrap 4. The illustration in this post effectively conveys what I am aiming for. Take a ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-4bootstrap-4

Customize the color when clicking on a mat-slide-toggle

Whenever I click on the element, a shadow appears in the color that corresponds to the element, which is currently yellow https://i.sstatic.net/21BR4.png I would like to change that shadow to be green instead, but I am unsure of how to do so. Here is my ...

htmlcssangularcolorsangular-material

Automatically updating markers on Google Maps v3

I'm utilizing the capabilities of Google Maps V3 to showcase various pins. My goal is to update these markers periodically without interfering with the current location or zoom level on the map. I aim for the markers to refresh every x seconds. How c ...

jqueryhtmlajax