Is there a way to place a logo image at the center of a bootstrap fixed navigation bar?

Question

Is there a way to place a logo image at the center of a bootstrap fixed navigation bar?

I have previous experience using bootstrap to create websites, and this time I am working on a site with a fixed navigation bar. My goal is to position the logo in the middle of the navigation links but also have it appear on top of the links.

Here is an image illustrating what I am trying to achieve:

https://i.sstatic.net/CdyTJ.jpg

The current code I have is as follows:

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-family: 'Helvetica', serif;
}

.navbar {
  background: none;
  border: none;
  margin-top: 20px;

}

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: -40px;
}

.navbar ul li {
  display: block;
  text-align: center;
  float: left;
  width: 20%;

}

.fourth-color {
  background-color: #ffecec;
  padding-top: 30px;
  padding-bottom: 30px;
}

.third-color {
  background-color: #122212;
  padding-top: 30px;
  padding-bottom: 30px;
}

.second-color {
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
}

.first-color {
  background-color: #f25727;
  padding-top: 30px;
  padding-bottom: 30px;
}

<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul>
      <li class="first-color"><a href="#">First</a></li>
      <li class="second-color"><a href="#">Second</a></li>
      <li><a href="#">Logo</a></li>
      <li class="third-color"><a href="#">Third</a></li>
      <li class="fourth-color"><a href="#">Fourth</a></li>
    </ul>
  </div>
</nav>

When attempting to add an image link, it doesn't align properly and disrupts the entire navigation bar layout. Any assistance would be greatly appreciated!

html css twitter-bootstrap nav

Answer 1

Answer №1

The issue you are facing is that only the list items with classes have padding. The anchor tag for the logo is not centered because it does not have a class with padding applied.

For example:

.navbar ul li {
  display: block;
  text-align: center;
  float: left;
  width: 20%;
}

.fourth-color, .third-color, .second-color, .first-color {
  padding-top: 30px;
  padding-bottom: 30px;
}

To fix the problem, apply padding to all list items.

.navbar ul li {
  padding-top: 30px;
  padding-bottom: 30px;
}

To center the middle logo, use position: relative and add additional styles using either a class or :nth-child as shown below.

@import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext");

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-family: 'Helvetica', serif;
}

.navbar {
  margin-top: 1em;
  text-align: center;
}

.navbar ul {
  padding: 0;
  text-decoration: none;
  list-style: none;
}

.navbar li {
  display: block;
  float: left;
  width: calc(20% - 1px - 0.906752000000002em);
  padding: 1.16em 1em;
  font: 100 21px "Raleway", sans-serif;
  background: #000;
  color: #fff;
  opacity: 1;
  transition: all 0.1s linear;
}

.navbar li:nth-child(1) {
  background: #ff410e;
}

.navbar li:nth-child(2) {
  background: #f4ca00;
}

.navbar li:nth-child(3) {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 2.84em;
  padding: 1.76em 0;
  width: 20%;
  position: relative;
  margin: -0.64em -2.16em;
  z-index: 1;
}
.navbar li:nth-child(3) a {
  color: #000;
}

.navbar li:nth-child(4) {
  background: #99d81b;
}

.navbar li:nth-child(5) {
  background: #00abf3;
}

.navbar li:hover:not(:nth-child(3)) {
  opacity: 0.7;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}
.navbar .active {
  text-decoration: underline;
}

<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul>
      <li><a class="active" href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Third</a></li>
      <li><a href="#">Fourth</a></li>
    </ul>
  </div>
</nav>

If you do not plan on creating a dropdown menu, consider styling the anchors instead of using a list for the menu bar. You can customize the anchors according to your requirements. Remember to keep your code DRY (Don't Repeat Yourself):

Answer 2

The issue you are facing is that only the list items with classes have padding. The anchor tag for the logo is not centered because it does not have a class with padding applied.

For example:

.navbar ul li {
  display: block;
  text-align: center;
  float: left;
  width: 20%;
}

.fourth-color, .third-color, .second-color, .first-color {
  padding-top: 30px;
  padding-bottom: 30px;
}

To fix the problem, apply padding to all list items.

.navbar ul li {
  padding-top: 30px;
  padding-bottom: 30px;
}

To center the middle logo, use position: relative and add additional styles using either a class or :nth-child as shown below.

@import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext");

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-family: 'Helvetica', serif;
}

.navbar {
  margin-top: 1em;
  text-align: center;
}

.navbar ul {
  padding: 0;
  text-decoration: none;
  list-style: none;
}

.navbar li {
  display: block;
  float: left;
  width: calc(20% - 1px - 0.906752000000002em);
  padding: 1.16em 1em;
  font: 100 21px "Raleway", sans-serif;
  background: #000;
  color: #fff;
  opacity: 1;
  transition: all 0.1s linear;
}

.navbar li:nth-child(1) {
  background: #ff410e;
}

.navbar li:nth-child(2) {
  background: #f4ca00;
}

.navbar li:nth-child(3) {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 2.84em;
  padding: 1.76em 0;
  width: 20%;
  position: relative;
  margin: -0.64em -2.16em;
  z-index: 1;
}
.navbar li:nth-child(3) a {
  color: #000;
}

.navbar li:nth-child(4) {
  background: #99d81b;
}

.navbar li:nth-child(5) {
  background: #00abf3;
}

.navbar li:hover:not(:nth-child(3)) {
  opacity: 0.7;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}
.navbar .active {
  text-decoration: underline;
}

<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul>
      <li><a class="active" href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Third</a></li>
      <li><a href="#">Fourth</a></li>
    </ul>
  </div>
</nav>

If you do not plan on creating a dropdown menu, consider styling the anchors instead of using a list for the menu bar. You can customize the anchors according to your requirements. Remember to keep your code DRY (Don't Repeat Yourself):

Is there a way to place a logo image at the center of a bootstrap fixed navigation bar?

Answer №1

Similar questions

Transform PHP String to Integer in SQL

Is there a glitch in Safari's CSS involving max-height?

Is it possible for the browser to ignore the style.min.css file and only use the style.css file when both files are linked in the HTML?

Bootstrap: Utilizing a full width grid system with columns contained within a container

What is causing this css style to fail in Internet Explorer 8?

Utilize JavaScript code with AJAX content without repeated inclusion

Display a text over a full-screen HTML5 video

Creating the Perfect Layout: Unveiling the Secrets of Bootstrap 4

Updating the Origin of a Sound Element in HTML5

Why is Property CSS of Undefined Giving Error?

Difficulty with animated presentations

Benefits of leveraging UI component libraries such as Bootstrap-Vue and React-Bootstrap

Reduce the size of the header in the Sydney theme for WordPress as you scroll

The basic CSS container fails to properly align its elements as intended

Is it permissible to utilize the submit button in order to trigger an AJAX function?

jQuery is the key to unlocking the potential of Bootstrap 4 plugins. Discover the ingenious ways

As the window size decreases, adjust the negative left margin to increase dynamically

Pug: exploring the wonders of bootstrap in the node_modules directory

Show or conceal a bootstrap spinner using a function

When utilizing the `express.static(__dirname)` function in Node.js with Express, the visitor may be directed to an incorrect HTML page