Arrange the navigation bar in a straight line

I am facing an issue with my navigation bar...

  1. I want it to be centered but it is not working.
  2. I want it to fill from left to right.

I have tried using the following CSS: text-align: center in .navbar a text-align: center in navbar.

.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
}

.navbar a {
  color: white;
  text-align: center;
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: block;
  float: left;
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}
<div class="navbar">
  <a href="../index.html">Home</a>
  <a href="Guides.html">Guides</a>
  <a href="#">Clips</a>
  <a href="#">Leaderboard</a>
  <a href="Support the server.html">Support the server</a>
  <a href="Help.html">Help</a>
</div>

htmlcssnavigation

Answer №1

In the CSS file, I have detailed the changes I made.

.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
  text-align: center; /* Added */
}

.navbar a {
  color: white;
  /* text-align: center; Removed */
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: inline-block; /* Changed from block */
  /* float: left; Removed */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}
<div class="navbar">
  <a href="../index.html">Home</a>
  <a href="Guides.html">Guides</a>
  <a href="#">Clips</a>
  <a href="#">Leaderborard</a>
  <a href="Support the server.html">Support the server</a>
  <a href="Help.html">Help</a>
</div>

Answer №2

Using the following CSS code snippet:

justify-content: center;

within a container can help achieve the desired alignment.

.container {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
}
.navbar {
  background-color: gray;
  position: fixed;
  top: 0%;
  text-align: center; /* Added */
}

.navbar a {
  color: white;
  /* text-align: center; Removed */
  font-family: monospace;
  font-size: 20px;
  text-decoration: none;
  padding: 15px;
  display: inline-block; /* Changed from block */
  /* float: left; Removed */
}

.navbar a:hover {
  background: lightgray;
  color: orange;
}
.navbar1 {
      background-color: gray;
      display: flex;
      justify-content: center;
      top: 50%;
      text-align: center; /* Added */
    }
    
    .navbar1 a {
      color: white;
      /* text-align: center; Removed */
      font-family: monospace;
      font-size: 20px;
      text-decoration: none;
      padding: 15px;
      display: inline-block; /* Changed from block */
      /* float: left; Removed */
    }
    
    .navbar1 a:hover {
      background: lightgray;
      color: orange;
    }
   

 <div class="container">
      <div class="navbar">
        <a href="../index.html">Home</a>
        <a href="Guides.html">Guides</a>
        <a href="#">Clips</a>
        <a href="#">Leaderborard</a>
        <a href="Support the server.html">Support the server</a>
        <a href="Help.html">Help</a>
      </div>
    </div>
<div class="navbar1">
            <a href="../index.html">Home</a>
            <a href="Guides.html">Guides</a>
            <a href="#">Clips</a>
            <a href="#">Leaderborard</a>
            <a href="Support the server.html">Support the server</a>
            <a href="Help.html">Help</a>
          </div>

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 a HTML table is generated from imported XML, DataTables will be applied

I am facing a challenge with my code and would appreciate some help. I am trying to load an XML file using jQuery and then use DataTables on my HTML table. However, the plugin doesn't seem to be functioning correctly. When I manually create an HTML ta ...

javascripthtmlajaxxmldatatables

increasing sticky header, refreshes the scroll location of the website

My website has a fixed header that expands to reveal more content when a button is clicked. However, I noticed that if the page has been scrolled down before clicking the button, the scroll position resets to the top of the page. To see this issue in acti ...

jquerycss

Using $_POST method to navigate within the same web page

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>PHP links</title> <?php echo '<div style="background-color:#ccc; padding:20px">' . $_POST['message'] . '</div>'; ...

phpjquerycsssqlajax

Utilizing unique background images tailored to different screen resolutions

In order to enhance the user experience on my website, I am looking to implement a feature that dynamically changes the background images based on the user's screen resolution. My plan is to use a small snippet of JavaScript within the <head> s ...

javascriptcsssecuritybackground-imagescreen-resolution

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular

Is it necessary to have col-xs-12 in Bootstrap 3?

In order to achieve the desired display for different screen sizes, we have implemented the following code: <div class="col-md-6">left</div> <div class="col-md-6">right</div> When viewed on smaller screens than md, this code succe ...

csshtmltwitter-bootstrap

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

htmlcsstailwind-css

Adjust the styling of selected elements when their values are changed

I am attempting to modify the background color based on the selected value that is returned. However, my current code doesn't seem to be working as expected: <script> $(document).ready(function() { $('#assessments').change(functi ...

javascriptjqueryhtml

Steps for Customizing the Font Style of a Certain List Item Tag <li>

I'm struggling to find the right CSS selector to specifically change the font of just one list item. Here's the current structure: <ul id="menu-applemain class="x-nav> <li>One</li> <li>Two</li> <li>Three</l ...

csshtml-lists

Issues with custom logo and menu/sidebar toggle on Wordpress

Hello everyone, I am currently facing some difficulties with my new WordPress blog that utilizes the Skilt-Theme. Specifically, I'm having trouble with the custom-logo and sidebar-toggle features. When there is no logo present, you can see the layout ...

csswordpressheadergraphical-logo

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Can you help me with CSS3 animations triggered by scrolling? I came across a code that reveals a DIV element as the user scrolls down: <script type="text/javascript"> $(document).ready(function() { /* Every time the window ...

jquerycssanimationwebscroll

Arranging elements in a Material-UI card in a horizontal layout

I am currently working on designing a user profile display. I want to create a card layout that showcases the details listed below. My goal is to have these items displayed side by side instead of being divided as shown in the image. Despite trying to giv ...

cssflexboxmaterial-ui

What is the correct way to iterate through a list of images fetched with getStaticProps and display them within the same component?

What is the proper way to map a list of images returned using getStaticProps? I had successfully implemented this by passing a prop to the gallery component in another page. However, I now want to consolidate all the getStaticProps code within the gallery ...

javascripthtmlreactjsnext.js

DOM not rendering Angular function output successfully

I recently delved into learning Angular and encountered a strange issue. Whenever I try to pull data using {{some.data.goes.here}} in the HTML, the result does not show up in the DOM. (function() { var app = angular.module('app', []); app. ...

javascripthtmlangularjs

CSS - maximize the contrast between background and foreground colors in order to enhance

I'm dealing with a bar column that changes color based on the percentage value. However, some of the text is not visible to users because it falls within the white section of the bar. When selected, the text becomes visible but not otherwise. Is the ...

csstextcolorsbackgroundforeground

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

htmlarraysjsonangulartypescript

What is the process for allowing right-click to open in a new tab, while left-clicking redirects to a new page in the current tab?

In my project, I have implemented a multi-page form for users to input information. The left side menu contains items that allow users to switch between different pages while filling out the form. Currently, clicking on any of these items redirects the use ...

htmlcssdjangohttp-redirect

Extracting the number of likes from each post on a specific profile using Python scrapy

Here is the code snippet that I am currently working with: #IMPORT THESE PACKAGES import requests import selenium from selenium import webdriver import pandas as pd #OPTIONAL PACKAGE, BUY MAYBE NEEDED from webdriver_manager.chrome import ChromeDriverManage ...

pythonhtmlcssseleniumweb-scraping

Showing the computation outcome on the identical page

I have implemented a table within my PHP code. In the second column of this table, it typically displays "---". However, once I click the submit button, the same page should now display the calculated result. Here is an example: <table> <tr>& ...

phpjavascriptcssajaxcalculator

All browsers experiencing issues with autoplay audio function

While creating an HTML page, I decided to include an audio element in the header using the code below: <audio id="audio_play"> <source src="voice/Story 2_A.m4a" type="audio/ogg" /> </audio> <img class= ...

javascripthtmljquery