I am having trouble getting my navigation bar to center itself

I'm struggling to center my navbar. My goal is to have the entire navbar consistently at the bottom of the screen, with the logo in the exact middle and two buttons on each side that stretch to the edges.

Below is the current code I'm using:

.navigation {
  font-size: 40px;
  font-family: Roboto-Light;
  color: black;
}

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav nav-justified">
      <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
      <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
      <a class="navigation foleyLogo nav-item nav-link" href="#">
        <img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:200px;" />
      </a>
      <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
      <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
    </div>
  </div>
</nav>

I thought that with the new Bootstrap 4, using `nav-justified` or `nav-fill` would automatically align everything as needed, as shown in tutorial videos.

htmlcssnavbarcenterbootstrap-4

Answer №1

When working with Bootstrap 4, take advantage of the predefined utilities it offers.

<div class="navbar-nav mx-auto">
    ...
</div>

For instance, using the class mx-auto will automatically add margin on the x-axis of the navbar-nav, effectively centering the items.

.navigation {
  font-size: 15px;
  font-family: Roboto-Light;
  color: black;
}

.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="navbar navbar-toggleable-xl ">
      <div class="container">
        <div class="navbar-nav mx-auto">
          <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
          <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
          <a class="navigation foleyLogo nav-item nav-link" href="#">
            <img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:100px;" />
          </a>
          <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
          <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
        </div>
        <!-- navbar-nav -->
      </div>
      <!-- Container -->
    </nav>

Answer №2

Thanks to a collaboration with @Brian, I was able to discover the solution! I incorporated {flex-grow: 3} into his code, which greatly improved the spacing. Additionally, I defined the size of the logo image, set it as an inline-block element, and matched the line-height of the entire navbar-nav to the picture.

See the revised code below: (Font-size and image-size have been adjusted for readability)

.navigation {
  font-size: 15px;
  font-family: Roboto-Light;
  color: black;
}

.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.navbar-nav a:nth-of-type(1) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(2) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(3) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(4) {
  flex-grow: 3;
}

.navbar-nav a:nth-of-type(5) {
  flex-grow: 3;
}

img.foleyPerformance {
  display: inline-block;
  width: 100px;
}

.navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  height: 100px;
  line-height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-xl">
  <div class="container" style="margin-left:50px; margin-right:50px; width:100%;">
    <div class="navbar-nav mx-auto">
      <a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
      <a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
      <a class="navigation foleyLogo nav-item nav-link" href="#">
        <img class="foleyPerformance" src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" />
      </a>
      <a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
      <a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
    </div>
    <!-- navbar-nav -->
  </div>
  <!-- Container -->
</nav>
<!-- Navbar -->

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

When the collapsible navbar is activated, the logo in the navbar-brand section shifts downwards. I prefer for it to remain fixed

As a newcomer to Bootstrap, I'm venturing into website creation for the first time. Any suggestions on how I can enhance the code would be greatly appreciated! Query: When collapsing the navbar, I noticed that my navbar-brand logo shifts to the botto ...

htmlcsstwitter-bootstrapbootstrap-4

What is the meaning of a "hook" in the world of HTML?

During a recent interview, a developer asked me about the "hooks" Angular uses with HTML. I admitted that I was not familiar with the term "hook," despite my extensive experience in web development over the past two decades. While I have some ideas of what ...

htmlangular

Showing the FA icon positioned elegantly at the conclusion of the text within the specified layout

I have a layout similar to the image shown below, where I am looking to place a fa icon above the end of some text. Can someone assist me in designing it like this? https://i.sstatic.net/aJIyV.png ...

htmlcssbootstrap-4

The overflow phenomenon similar to what can be found in Photoshop

I'm curious if there's a way to create an overlay effect similar to what you see in Photoshop or Illustrator. I have a background picture and a colored div in front of it. I'd like to add an overlay effect to the front div that looks more i ...

javascripthtmlcss

Moving files by dragging and dropping rather than deleting them

I have successfully implemented a feature using JavaScript to drag and drop multiple files, followed by displaying those images. The code below is fully functional without any errors. Need help with: I am now looking to add the ability to remove these ima ...

javascripthtmljquerydrag-and-drop

Ensuring Quick Response Times When Incorporating Personalized Text Styles into Twitter Bootstrap

Currently, I am experimenting with incorporating my custom class titled "article-title" which is significantly larger than the default H1 font size in Twitter Bootstrap. Can someone provide guidance on the necessary steps to ensure responsiveness? My goal ...

csstwitter-bootstrapresponsive-design

Why aren't these div elements aligning with each other?

I am facing challenges in formatting these divs.... I have added borders around the divs to highlight the issue... I am aiming to align these divs similar to the second image, and I am puzzled as to why the top div is not aligning properly. My goal is for ...

jqueryhtmlcss

What could be causing this issue with the jQuery CSS not functioning properly?

When I come across the following HTML snippet: <div id="map"> <div class="elem"> hey1 </div> <div class="elem"> hey2 </div> <div class="elem"> hey3 </div> </div> In JavaScript: va ...

jquerycss

I've exhausted all options from stackoverflow with no success. Google Chrome's Autofill feature is wreaking havoc on my theme. Any suggestions on how to tackle this issue?

I designed a template with a stunning CSS layout. All I want is to have a transparent background with white font color, but Google Chrome seems to be causing issues with my theme. What steps should I take? I've exhausted all resources available onlin ...

htmlcssgoogle-chrome

Struggling to eliminate HTML entities in PHP

Hey everyone, I've been attempting to sanitize a string with HTML entities using PHP, but I'm running into some issues. Below is a snippet of my code: $body = "Mal ein neuer &amp;lt;b&amp;gt;Test&amp;lt;/b&amp;gt;&amp;lt;br& ...

phphtmlstringentities

Create two div elements containing responsive images using HTML and CSS

Can someone assist me in creating responsive DIVs with images inside? Currently, the second div is appearing below the first one, and I'm struggling to make them scale based on mobile and tablet screen sizes. Here is the code snippet: .new_ba ...

htmlcssresponsive-design

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them. I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning ...

javascripthtmljquerycss

Determining height of an element in AngularJS directive prior to rendering the view

As I dive into the world of Angular, any assistance is greatly welcomed. My goal is to vertically align a div based on screen size (excluding the header and footer) when the page loads, the window resizes, and during a custom event triggered by the user ex ...

javascriptcssangularjs

Establishing a connection between an Express server and a MariaDB database

Currently, I am working on creating a simple login webpage without any security measures. The setup includes an OpenSuse server with a mariadb database, an Express server, and an HTML file for the client. Express Server: const mariadb = require('mari ...

htmlnode.jsexpresspostmariadb

Using WebRTC on a shared hosting environment (with SSH access) without the need for nodejs, ideally implemented in PHP

As I was exploring ways to integrate webRTC into a website that I am creating on shared hosting, I stumbled upon this GitHub repository by nielsbaloe. It has been incredibly helpful in establishing a basic connection. This particular code snippet appears ...

javascriptphphtmlwebrtc

Code Wizard

I am currently working on a project to develop an HTML editor. How it Needs to Function Elements Inside: Text Area - Used for typing HTML as text Iframe - Displays the typed HTML as real [renders string HTML to UI] Various Buttons Functionality: When ...

javascriptjqueryhtmlregexeditor

Unable to utilize Bootstrap inside the Shadow DOM of Custom Elements

I am currently in the process of developing a web component using plain JavaScript and implementing Bootstrap 5 for styling purposes. While the Bootstrap styling is functioning correctly, I am encountering issues with the event listeners for the Bootstrap ...

javascriptcssweb-componentcustom-elementbootstrap-5

Utilizing Wordpress post images to dynamically change background URLs in CSS

Is there a way to dynamically set a background image in CSS using PHP, specifically the Wordpress post image? background: <?php if(has_post_thumbnail()){ $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'dest ...

csswordpresswordpress-themingthumbnailscustom-wordpress-pages

The issue with CSS and JavaScript is causing the appended elements to not display properly in PHP code

I am currently facing issues with retrieving the grandchildren from my database table named referrals. Surprisingly, my code successfully retrieves the username of my grandchildren, but it does not display below the line of my child and there are no errors ...

javascriptphphtml

How to display a PDF file stored in the documents directory of an iOS device with Phonegap

I'm encountering an issue when it comes to displaying a PDF using HTML, PhoneGap, or JavaScript. The web application I'm working on is developed in Sencha Touch 2. Here's exactly what I need: I need to display a PDF file located in the d ...

javascripthtmlcordovaphonegap-plugins