Aligning the Navbar in the center causes the text to become compressed

My goal is to have a navbar that is always centered and displayed at the top of the screen. However, every time I try to fix it, something goes wrong and the text gets all smushed together. I want the navbar to be straight across without any overlap between the "Home" button and the image. Thank you for your help.

Check out how it looks when centered

This is how I would like it to look, but not centered

<!doctype html>
<html lang="en">

<head>

    <title>The Benjamin Project | Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/assets/css/animate.css">
    <link rel="icon" href="/static/assets/img/favicon.ico"> <!-- site icon -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/static/assets/script.js"></script>

    <style>

    @font-face {
      font-family: Panton;
      src:url("/static/assets/font/Panton-LightCaps.otf");
    }
    body {
      margin: 0;
      padding: 0;
      background-color: #8CD28C;
      overflow-x: hidden;
      min-height:75px;
      line-height:75px;
    }
    .navbar {
      margin: 0;
      border-radius: 0;
      background-color: #8CD28C; /*bg color for tabs on navbar*/
      color: #606060; /*text color for tabs on navbar*/
      padding: 50px 0px 50px 0px;
      font-size: 2em;
      font-family:Panton;
      border: 0;
      animation-duration: 1.5s;
    }
    .navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
      color: #606060; /*text color for active*/
      background-color: #8CD28C; /*bg color for active*/
      font-weight: bold;


    }
    .selected {
     text-decoration-line:underline;


    }
    .navbar .navbar-brand img {
      border-radius: 360%; /*rounds image*/
      margin-top: -55px;
      margin-right: 10px;

    }

    .navbar-default .navbar-nav li a {
      color: #606060; /*non active colors*/
      font-weight: bold;
    }
    .navbar-default .navbar-nav li a:hover {
      color: #606060; /*color of text being hovered over*/
      background-color: inherit;
      text-decoration: underline;
    }
    .row {
       margin-top: 3%;
       padding-left: 20%;
       padding-right: 20%;
       animation-duration: 2s;
        }
    .row hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 2px solid #606060;
      border-radius: 100%;
      margin: 1em 0;
      padding: 0;
    }
    .center{
      width:50%;
      max-width:960px;
      margin:0 auto;
    }

  </style>
</head>



  <body>
    <nav class="navbar navbar-default fadeInDown animated navbar-static-top center">
      <div class="container-fluid">
        <div class="navbar-header navbar-left">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- navigation button on mobile -->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="https://imgur.com/k8SlOAa.png" allign="middle" width="125" height="125"></a> <!-- benjamin logo  alt="Benjamin Logo"-->
        </div>
        <div class="collapse navbar-collapse navbar-left center" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active selected"><a href="/">Home</a></li> <!-- labels on navigation bar -->
            <li><a href="/commands">Commands & Info</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/home/views/benjamins.html">Benjamins</a></li>
            <li><a href="/account/login">Login</a></li>
          </ul>
        </div>
      </div>

  </nav>
  <script type="text/javascript" src="/static/assets/script.js"></script>

  <page class="main">

  <div class="row fadeIn animated"><hr></div>

  </page>




</body>
</html>

Answer №1

When attempting to style the nav to match your linked image, you encountered an issue.

.center{
  width:50%;
  max-width:960px;
  margin:0 auto;
}

I noticed that everything works fine when this code is removed. For a full-screen view or to reference it later, you can visit the following link: https://codepen.io/anon/pen/zpZGwZ.

body {
  margin: 0;
  padding: 0;
  background-color: #8CD28C !important;
  overflow-x: hidden;
}

.navbar {
  margin: 0;
  border-radius: 0;
  background-color: #8CD28C !important;
  /*bg color for tabs on navbar*/
  color: #606060;
  /*text color for tabs on navbar*/
  padding: 50px 0;
  margin: 0;
  font-size: 1.5em;
  font-family: Panton;
  border: 0 !important;
  animation-duration: 1.5s;
}

.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover {
  color: #606060;
  /*text color for active*/
  background-color: #8CD28C;
  /*bg color for active*/
  font-weight: bold;
}

.selected {
  text-decoration-line: underline;
}

.navbar .navbar-brand img {
  border-radius: 360%;
  margin-top: -55px;
  margin-right: 10px;
}

.navbar-default .navbar-nav li a {
  color: #606060;
  /*non-active colors*/
  font-weight: bold;
  font-size: 14px;

}

.navbar-default .navbar-nav li a:hover {
  color: #606060;
  /*color of text being hovered over*/
  background-color: inherit;
  text-decoration: underline;
}

.page-padding {
  padding: 0 10%;
}

@media (min-width: 992px) {
  .page-padding {
    padding: 0 13%;
  }
  .navbar-default .navbar-nav li a {
    color: #606060;
    font-weight: bold;
    font-size: 20px;
}
}

.page-content hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #606060;
  border-radius: 100%;
  margin: 1em 0;
  padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>
<body>
  <div class="page-padding">
    <nav class="navbar navbar-default">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="https://i.imgur.com/k8SlOAa.png" width="125" height="125"></a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active selected"><a href="/">Home</a></li>
          <li><a href="/commands">Commands & Info</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/home/views/benjamins.html">Benjamins</a></li>
          <li><a href="/account/login">Login</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </nav>

    <page class="main">
      <div class="page-content fadeIn animated">
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac felis facilisis, pellentesque mauris at, accumsan diam. Ut aliquet eros a quam consequat bibendum. Donec lacinia odio aliquet, rutrum magna sit amet, mollis tortor. Nunc in viverra
          libero. Phasellus eget tellus eget lorem mollis sodales. Fusce sem eros, molestie eu turpis sed, tempus finibus ipsum. Donec consectetur lectus ac dui gravida, nec tristique eros semper. Proin in vestibulum eros, ut ullamcorper purus. Proin
          tincidunt neque urna, non placerat mi tincidunt id. Nulla eros tellus, feugiat tincidunt ex quis, laoreet interdum elit. Morbi dapibus, lacus id viverra posuere, arcu nulla aliquet mi, eu sollicitudin quam massa sed justo. Suspendisse vel lobortis
          nibh, non convallis quam.</p>
        <hr>
      </div>
    </page>
  </div>
</body>
</html>

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

Are there any APIs available for accessing call logs from another app using Android?

Currently, I am in the process of developing an Android Child Monitoring application. My goal is to access the call logs from one app and transfer them to another app. Are there any relevant APIs that can assist with this task? Alternatively, do you have ...

Reorder a specific character within an array using Javascript

I am a beginner in JavaScript and I'm hoping for some assistance. I have an HTML list with a select option, and I want to sort the list based on the selected character. Specifically, I would like to arrange the "Z" options first, followed by the "B" ...

Unable to retrieve list using Selenium in C# due to issues with FindElements method

Currently, I am working with C# and NUnit. I have encountered an issue where I need to extract the value from a span element and store it in an ArrayList. This is the code I am using to retrieve the price list: var productprice = driver.FindElements(By. ...

changing up the format of nested blockquotes

My website includes various text features, which means that nested blockquotes are a possibility. I am now curious if it is feasible to style nested blockquotes differently from each other! blockquote{ background-color:#666; color:#fff; border ...

Trigger the function in ng-change each time the same option is clicked repeatedly

Here is the code I am working with: angular.module("myApp", []).controller("myController", function($scope) { $scope.currentOption; $scope.showWindow = false; $scope.myOptions = [{ id: 1, name: 'This opens the window' }, { ...

How can an accordion icon be added and list toggling be accomplished when HTML data is sourced from an API instead of a JSON response?

I have an API that sends HTML data as a response. The task at hand is to add accordion icons to the items in the list and enable list toggling using HTML, CSS, JavaScript, React, and MaterialUI. Unfortunately, I am limited in my options and cannot use JQ ...

Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png I have been using "position: absolute" to keep the circle in place, but the is ...

The Bootstrap Carousel is failing to respond as expected

Having some trouble incorporating a carousel on my landing page. I can see the first image, but the carousel isn't sliding to the next one. I copied the template from bootstrap-carousel, but even the data-bs-interval attribute isn't responding. M ...

Ensuring data integrity in Django models: Setting 'Pcaps.uuid' as unique is necessary as it is being referenced by a foreign key

My goal is to create a set of tables containing attributes of pcaps, but I am encountering a strange error. The code in my models class is as follows: class Pcaps(models.Model): uuid = models.CharField(max_length=50) filename = models.CharField( ...

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

Sending information to a dialog box

I'm facing a challenge with my button that triggers a modal. Although the button works fine, I now need to figure out how to pass data from the button to a specific field within the modal. Here is the HTML code: <input type=button value='Add ...

Challenge with modal dialog scrolling on iPad and iPhone

Our website contains various pages that open JQuery 'Modal Dialog' boxes. These modal dialog boxes function well in all web browsers. However, there is an issue when viewing the website on an iPad or iPhone, which seems to be a common problem. ...

Grab cell information from a dynamic table using Ruby and Selenium

I am attempting to retrieve a property of cells within a table. <table id="m-103" class="m-row" cellspacing="0"> <a name="2"></a> <table id="m-108" class="m-row " cellspacing="0"> <a name="3"></a> <table id="m-191" ...

The use of absolute positioning in conjunction with overflow:hidden

<div id="container" style="overflow:hidden; position:relative;"> <div id="content" style="position:absolute;"> </div> </div> Is it possible to display the content element which is larger than its parent container, while still k ...

Incorporating an HTML Canvas element within a CSS grid design

I've been attempting to integrate an html canvas that I created into one of the css grid classes specified in my code. The code runs when the "Calculate" button is clicked. Upon clicking the button, the <div> section designated for the canvas r ...

What is the most efficient way to specify individual values for Django model fields when creating multiple model objects?

In my django app, I have created the following models: from django.db import models class TaskTracking(models.Model): name = models.CharField(max_length=20) class Parent(models.Model): my_attribute = models.CharField(max_length=255, blank=True) ...

Can you identify the origin of the inclusion of a .php file?

Is there a way to automatically determine if a PHP script is being accessed directly as an HTML page, used as a JavaScript file, or utilized as a CSS Stylesheet? I'm looking for a solution that doesn't involve GET variables or setting a flag wit ...

The Twitter Bootstrap modal pops up over the menu, making the links unclickable

Currently, I am employed at a website called . If you navigate to the "Serviços" section on the homepage, you will encounter a row of icons and a blue button labeled "saber mais". Clicking on this button triggers a modal box that displays additional infor ...

Is it possible to use PHP to retrieve and display an entire webpage from a separate domain?

Currently, I am working on a PHP program that allows me to load a complete webpage and navigate the site while remaining in a different domain. However, I have encountered an issue with loading stylesheets and images due to them being relative links. I am ...

How come the data I send gets converted to Undefined when working with Tabulator?

I am currently facing an issue with integrating JSON data as search results into my Tabulator. The goal is to display these search results in their respective columns within the Tabulator. Here is the code snippet I have implemented: <body> <div ...