Tips for making your navigation bar visually appealing as well as functional

Is there a way to center my navigation bar on the page? I've attempted using <center>, but can't seem to get it right!

CSS:

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.NavItem {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #080808;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
text
}

a:hover, a:active {
    background-color: #7A991A;
}

HTML:

<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

Apologies for the somewhat casual titles of the navigation buttons. I'm creating a website that showcases my thoughts and achievements.

Feel free to check out this JSFiddle link for reference: https://jsfiddle.net/ryfv3499/

htmlcssnavigationbar

Answer №1

Revise the .Navigation CSS style

.Navigation {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width:80%;
 }

Feel free to adjust the width as long as it's not set at 100%

Answer №2

apply display: inline-block to .NavItem

set text-align: center for .NavBar

.NavBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;
}

.NavItem {
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #080808;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
text
}

a:hover, a:active {
    background-color: #7A991A;
}

body { background-color: #D0D0D0; }
<ul class="NavBar">
  <li class="NavItem"><a href="#home">Home</a></li>
  <li class="NavItem"><a href="#news">Snippets of Divinity</a></li>
  <li class="NavItem"><a href="#contact">Contact</a></li>
  <li class="NavItem"><a href="#about">Donate</a></li>
</ul>

Answer №3

To center your navigation bar using CSS, you can add the following code:

.NavBar {
    list-style-type: none;
    /* margin: 0; */
    margin-left:auto;
    margin-right:auto;
    padding: 0;
    overflow: hidden;
}

Make sure to set a fixed width for your navigation bar so that it can be centered properly.

I hope this solution works for you!

Answer №4

Make sure to include margin: 0 auto; and specify the width of your element.

.TopBar {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    width:500px;
}

Check out this demo: https://jsfiddle.net/ryfv3499/11/

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

Is there a way to keep this table fixed in place as the user scrolls?

Is there an alternative way to fix the content on the header so that it remains visible on the screen until the next table, even when scrolling? I've tried using position: sticky and top: 0, but the header still scrolls past. I have checked for any ov ...

cssangularposition

Double-click required to toggle button

Here is the code snippet for controlling an LED using a web page. The script, linked to Python, effectively controls the LED. However, there is an issue where the button toggles to the right side (ON position) only after a double click. Upon first click ...

javascriptjquerypythonhtml

Ways to showcase the outcome of a spin after each rotation

I am currently working on a spinning code snippet that allows users to spin and potentially win different amounts. The code includes functionality to prevent more than 3 spins, set random rotation values, and animate the spinning effect. However, I now wa ...

javascripthtmljquerycss

Choosing jQuery elements based on multiple criteria

My attempt at a seemingly simple task is proving to be quite confusing and isn't functioning as expected... The goal is clear - upon document load using $(document).ready(), I want to target all input elements with the attribute type="text" and apply ...

javascriptjqueryasp.nethtmlcss

Is there a way to direct the embedded YouTube video on my HTML website to open in the YouTube application instead?

My website has embedded Youtube videos, but when viewing on a mobile browser they open in the default player. I want them to open in the Youtube application instead, as my videos are 360 degrees and do not work properly in the default browser player. ...

javascripthtmlvideoyoutubeembed

When accessing the `.children()` method on a JQuery object derived from a DOM node object, the `innerHtml

function gatherTaskDetails(element) { var info = {}; info.name = $(element).children(".nameHere").text(); info.date = $(element).children(".dateHere").text(); info.class = $(element).children(".classhere").text(); co ...

javascriptjqueryhtml

Flex items refusing to wrap in Firefox

I am facing an issue with my layout setup in different browsers. When I have a list of divs inside a flex div, it displays correctly in Chrome: However, in Firefox, it only shows a horizontal scroll with one line. Is there a way to prevent the forced hor ...

htmlcssflexbox

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

javascriptcssangularjsngroute

creating div elements dynamically using JavaScript

It is required that the user be able to dynamically add 5 divs by clicking on the plus icon. An alert should appear after attempting to add more than 5 divs, prohibiting any odd numbers from being added. function addvv() { var numItems = $('div.b ...

javascripthtmljquerycss

Auto-layout malfunctions when .col contains a child .table-responsive

Utilizing Bootstrap's auto-layout grid allows for the explicit specification of width for select columns, with the remaining columns evenly splitting the space. However, when an auto-.col contains a child with .table-responsive, the system appears to ...

htmlcsstwitter-bootstrapbootstrap-4

Having trouble getting IcoMoon icons to display properly in Internet Explorer 8?

While using IcoMoon icons on my website, I have noticed that they function perfectly in all modern browsers except for Internet Explorer 7, where they do not display at all. In Internet Explorer 8, the icons show up as small boxes instead. The CSS code I a ...

cssinternet-explorer-8internet-explorer-7font-facehaslayout

The autogenerated HTML5 constraints in Symfony2 are not functioning properly

I'm currently working on a project using Symfony2 (v2.3.6) and I wanted to utilize the auto-generated HTML5 constraints in my form. For this purpose, I created a simple form with just one field that has a RegEx constraint: public function formAction ...

phphtmlformssymfony

Elements in other columns being forced down due to Bootstrap column placement

Here is an example of the code illustrating the issue I am facing: <div class='body'> <div class="container"> <div class="col-md-12"> <div class="col-md-6"> Content on Left </div> <div class ...

htmlcssbootstrap-4

Create a stylish grid layout with perfectly centered content using CSS

I am in the process of developing a layout for print material on sticker labels. To achieve this, I have created a div element and applied the display:grid; property to customize the space allocation. My goal is to make item1, item2, and item3 overlap eac ...

htmlcsscss-grid

Creating HTML code using PHP to display two tables next to each other

My goal is to display two tables side by side in an HTML table, each ordered by a different column. I attempted this using the following code: <tbody> <td> <?php require_once "db_data.php"; $bids_results = $mysqli-& ...

phphtmlcss

Having issues with displaying options in Select2 within a Vue Component?

I have successfully created a Vue component that generates options for a select dropdown as shown below: <select ref="subdomain_id" name="subdomain_id" id="newEvidenceSubdomain" class="form-control" :class=&qu ...

javascripthtmlvue.jsjquery-select2

Laravel's blade is sending yet another variable

I have encountered an issue with my script that involves displaying collections using a foreach loop. The problem arises when trying to delete a specific collection by clicking on a button. It seems that the deletion is not working correctly as clicking on ...

phphtmllaravellaravel-blade

Creating a clickable image in the header of an R Shiny app

I've been attempting to create a hyperlink from the image output, but I'm encountering difficulties despite reviewing similar questions on Stack Overflow. svg with clickable links in shiny - not clickable The tags are not working. server.r li ...

htmlrhyperlinkshiny

What is the best way to serialize all li#id elements within an ul using jQuery's serialize() function

First and foremost, I want to clarify that I am utilizing the latest version of jQuery and not jQuery-UI. Below is the list I am working with: <ul id="audio_list"> <li id="trackid_1"></li> <li id="trackid_5"></li> ...

phpjavascriptjqueryhtmlserialization

Implementing multiple content changes in a span using javascript

Having an issue with a pause button where the icon should change on click between play and pause icons. Initially, the first click successfully changes the icon from a play arrow to a pause icon, but it only changes once. It seems like the else part of the ...

javascripthtml