By applying text-decoration: none; to <a> tags, all additional styles are removed

I'm currently working on a web page layout and I encountered an issue with removing the underline from the links in my navigation bar. To fix this, I used text-decoration: none; but now I'm having trouble with other styles being overridden, like text alignment.

Here is a snippet of my code...

.nav-bar a {
  text-align: center;
  text-transform: uppercase;
  font-family: "Varela Round";
  font-size: 20px;
  text-decoration: none;
}
<div class="nav-bar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</div>

If anyone has any suggestions or solutions, I'd greatly appreciate the assistance!

htmlcssanchor

Answer №1

Give this a shot

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation</title>
        <style type = "text/css">
            ul#nav-bar
            {
                list-style: none;
                margin: 0;
            }

            ul#nav-bar li
            {
                display: inline;
            }

            ul#nav-bar a
            {
                text-transform: uppercase;
                font-family: "Varela Round";
                font-size: 20px;
                text-decoration: none;
                padding: 5px;
            }
        </style>
    </head>

    <body>
        <div>
            <ul id = "nav-bar">
              <li><a href = "#home">Home</a></li>  
              <li><a href = "#about">About</a></li>
              <li><a href = "#contact">Contact</a></li>
            </ul>
        </div>
    </body>
</html>

If you don't need text-align: center, skip it. Also, opt for using the id attribute over class if your style is only being applied in one place.

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

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

javascriptjqueryhtml

Can an image be positioned so that it extends beyond the edge of the window without impacting the scroll bars?

I'm trying to position an image on the side of the screen that only shows up on large widescreen monitors. Currently, I have this tag in place which positions it perfectly: <img src="image.png" style="position: absolute; left: 1400px ...

htmlcssimage

problem specifically occurring on tablets with fixed positioning

Have you checked out the site I'm referring to here? An unusual issue seems to be occurring specifically on tablets. We implemented the scroll to fixed jQuery plugin to fix the position of the sidebar after scrolling, which works perfectly on all de ...

jqueryioscssipadtablet

Using JQuery to duplicate and assign individual IDs to each clone

Currently, I am in the process of developing a straightforward web application. Users will enter information by selecting options from drop-down menus and typing text into designated fields. Upon completion, users can click on a "generate" button that will ...

javascriptjqueryhtmlforms

Should all images be set to 100% width with a standard Bootstrap configuration?

For my website project, I decided to incorporate the Bootstrap carousel into the header using version 3.0.3 of Bootstrap. Everything seemed to be functioning correctly until I noticed a strange issue with the image sizes on the page. Initially, all the ima ...

htmlcsstwitter-bootstrapresponsive-designcarousel

What method can I use to replace the status bar from the top?

Is there a way to smoothly slide in and out a <View/> on React Native iOS, similar to the animation sequences shown in the images below? ...

javascripthtmlcssreactjsreact-native

What is the best way to populate data with Angular framework in my specific situation?

I'm currently working with Angular and attempting to implement a pagination feature. Here is what I have so far: Angular controller appModule.controller('testCtrl', ['$scope', function ($scope) { $scope.numbers = 7; }]) html ...

javascripthtmlcssangularjs

Modify the appearance of the gradient progression bar

I am working on a gradient progress bar with the following code: CSS: .progressbar { height: 15px; border-radius: 1em; margin:5px; background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%,transparent 25%, t ...

htmlcssangularbootstrap-5

What could be causing the hidden field to remain unchanged even after implementing `$watch` in the controller?

Here is the form I have: The custom directive business-validation includes the following code: var CREDIT_CARD_REGEX = /^\d{0,24}$/; angular.module('directives').directive('creditCard', [ function () { return { ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

htmlcssbootstrap-4

Show the user's username on their profile page by retrieving the name from the database

Upon successful login/signup with various services, I want to display the username on the profile page. However, my database stores user data in different fields depending on the service used - user.twitter.name for Twitter logins, user.google.name for Goo ...

javascriptnode.jshtmlexpress

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Here is the code snippet I've been working on: <strong>Station Name</strong> <!--This portion includes a combobox using HTML5 --> <input type=text list=Stations> <datalist id=Stations> <option>Station1</opt ...

phpjavascriptjqueryhtmlcombobox

Is the hardware acceleration of the iPhone 4 significantly weaker than that of the iPhone 4s?

My HTML5 web application utilizes hardware acceleration through the CSS3 property translateZ(0). Everything runs smoothly on my 4s device. However, when I try the same application on an iPhone4, the performance drastically decreases and becomes almost un ...

htmlcssiphone-4hardware-acceleration

Executing external Javascript within an HTML document

Just diving into this realm, so please have patience with me. I've got an external js file linked in my HTML. The JS code is solid and functions properly in Fiddle - https://jsfiddle.net/0hu4fs4y/ <script src="js/noti.js"></script> <sc ...

javascripthtml

Styling iFrame Widget with Custom CSS (React, MUI)

I'm currently working on personalizing a fiat-to-crypto integration widget to align with the style of my react application. The setup involves a reactjs platform using material ui, with the widget embedded in an iFrame. An individual has successfull ...

javascriptcssreactjsiframematerial-ui

Is there a way to generate a checkerboard dynamically with the help of jQuery?

I've made some progress so far, but I'm facing a challenge where I need to push 8 <td> elements into 8 different <tr> elements without hardcoding anything or modifying the HTML directly. Any help would be appreciated! JavaScript v ...

javascriptjqueryhtml

Creating a customized display on a webpage using XML and XSL to generate unique

Looking to utilize my xml file for generating various xsl pages. <movies> <movie> <name>Shark tank</name> <movie> <movie> <name>Tank Shark</name> <movie> ...

htmlxmlxslthyperlink

Adsense displays empty ad banners regardless of their predetermined size

Having trouble with Adsense banners? I have a page with three fixed-size banners (336 x 280) and sometimes they appear blank. It's random - one might work while the others don't, or none may work at all. The code is the same for each banner: < ...

javascripthtmlcssadsadsense

Having trouble getting Sass extending to work in a basic scenario?

Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...

cssangularsass

Is it possible to click on the second item in a list based on its Span class using Selenium?

self.driver.find_element_by_xpath("//span[@class='bog']").click() This is the current code I am using. It allows me to click on the first email in my Gmail inbox. However, I now want to be able to click on the second or third email. I am struggl ...

pythonhtmlselenium