This question already has answers here:
Remove blue underline from link
(22 answers)
Closed 1 year ago.
I've made a menu in my Website and I've been trying to remove those blue lines (which usually appear by default) from there. I've tried adding text-decoration:none; in all the options relevant to it but, that doesn't seem to be working.
What should I do?
.menu {
list-style: none;
font-family: sans-serif;
position: absolute;
top: 10px;
right: 30px;
z-index: 15;
cursor: pointer;
align-self: center;
text-decoration: none;
color: darkblue;
}
.links {
float: left;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
padding-left: 10px;
font-family: monospace;
font-size: 20px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
V.links:hover {
background-color: hotpink;
text-decoration: none;
}
<section id=first>
<center>
<ul class="menu">
<li class="links"> Introduction </li>
<li class="links"> About </li>
<li class="links"> Defenition </li>
<li class="links"> My Works </li>
<li class="links"> Inspiration </li>
<li class="links"> Contact </li>
</ul>
</center>
</section>
The blue underline is because of text-decoration: underline; added to an anchor tag by default. To remove that use text-decoration: none for .link a
.menu {
list-style: none;
font-family: sans-serif;
position: absolute;
top: 10px;
right: 30px;
z-index: 15;
cursor: pointer;
align-self: center;
text-decoration: none;
color: darkblue;
}
.links {
float: left;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
padding-left: 10px;
font-family: monospace;
font-size: 20px;
font-weight: bold;
text-decoration: none;
text-align: center;
}
.links a {
text-decoration: none;
}
V.links:hover {
background-color: hotpink;
text-decoration: none;
}
<section id=first>
<center>
<ul class="menu">
<li class="links"> Introduction </li>
<li class="links"> About </li>
<li class="links"> Defenition </li>
<li class="links"> My Works </li>
<li class="links"> Inspiration </li>
<li class="links"> Contact </li>
</ul>
</center>
</section>
li{
list-style-type: none;
}
a{
text-decoration: none;
}
next time put your code here not picture and if you only searching on google you will get answer this qustion is have answer
<br/>
<br/>
<br/>
Clicl Here to see your qustion about point
<br/>
<br/>
<br/>
<br/>
click here to see your qustion about line under text
<br/>
<br/>
<br/>
<li>example one</li>
<br/>
<br/>
<br/>
example two
Related
so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
This question already has answers here:
How do I center floated elements?
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I have a problem with my Nav Bar. I need it to be centered on the screen, so it is in the middle of everything. But my Nav Bar will only be on the left side of my screen.
I tried to use Margin to fix the issue, but then it will not be responsive to the rest, so that does not work.
Here is my code for the Nav Bar:
HTML:
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Ignore the "href", they will be sorted afterwards
the CSS:
*{
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav{
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul{
text-align: center;
}
ul li{
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a{
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;}
ul li a:hover {
color: red;
}
I did read some of the others answered questions but without any luck from them, hope you can help me once again!
Just add display: inline-block; to the CSS rule for ul to make it only as wide as its contents and therefore also to allow the text-align: center for nav to have an effect:
* {
margin: 0%;
padding: 0%;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
width: 100%;
height: 100px;
text-align: center;
display: inline-block;
}
ul {
display: inline-block;
text-align: center;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 200%;
padding: 0px 20px;
display: block;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
Try putting the nav in center tags.
Like this:
<center>
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
</center>
Sorry if this doesn't help. I couldn't fully understand your problem.
Try this. Don't use <center> tag, it's obsolete.
html:
<header>
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</header>
css:
header { width: 100%; }
nav { width: 980px; margin: 0 auto; display: block; }
margin: 0 auto; will center the element. just make sure that it has a width, otherwise this will not work.
try this =)
* {
margin: 0;
padding: 0;
background-color: rgb(53, 53, 53);
text-decoration: none;
}
nav {
position: absolute;
width: 100%;
height: 100px;
text-align: center;
display: block;
margin: auto;
border: 2px solid white;
}
ul {
display: inline-block;
text-align: center;
width: max-content;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin: auto;
}
ul li a {
font-family: 'PT Sans', sans-serif;
color: white;
font-size: 100%;
padding: 0px 10px;
display: inline-block;
}
ul li a:hover {
color: red;
}
<nav>
<ul>
<li>
<a href="BlogTest.html">
Home
</a>
</li>
<li>
<a href="BlogTest.html">
About Me
</a>
</li>
<li>
<a href="BlogTest.html">
Contact Me
</a>
</li>
<li>
<a href="BlogTest.html">
Blog
</a>
</li>
</ul>
</nav>
I haven't found a solution yet..
my links on pictures on my homepage and the link in the ul li nav bar don't work. My links work on other pages except on the home page...
Links to the home-page from the home-page do work.
I only have this problem in IE and IEE. works fine on all other browsers.
Is something standing in the way of IE opening these links? The fault is not in my browser setting. IE finds the links when i hover over them but it doesn't do anything when I click on the links.
This is the code for the not working links:
This is the button image, 1 of the 3
<div class="buttonlinks">
<div class="thumbnail">
<img src="images/Knop1Layer.PNG" class="button">
<div class="tekstblok">
<ul class="buttontekst">
<li>HEALTH ECONOMIC MODELS</li>
<li>BUDGET IMPACT</li>
<li>Art. 81 TOOLS</li>
<li>VALUE TOOLS</li>
<li>…</li>
</ul>
</div>
</div>
CSS:
.button {
width: 200px;
min-height: 80px;
margin: 0 auto;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
color: #000;
transition: all 0.3s linear;
justify-content: center;
display: inline-block;
line-height: 30px;
}
.button:hover{
opacity: 0.5;
background-color: #FEFEFE;
cursor: pointer;
}
This is the ul li link.
<header class="header"> <a href="home.html" style="text-decoration:none !important;">
<div class="logoheader"><img src="images/hebias-logo.jpg" alt="Hebias" class="logo"></div>
</a>
<nav class="navigate">
<ul>
<p> Tel. +32 55 690 017 info#hebias.be</p> <!---link outlook--->
</ul>
<ul>
<li> <a class="link" href="maactivities.html" style="text-decoration:none !important;">Links</a></li>
</ul>
</nav>
</header>
CSS:
a{
color: #7F7F7F;
font-size: 14px;
letter-spacing: 2px;
font-weight: bold;
transition: all 0.3s linear;
cursor: pointer;
text-decoration: none;
}
a:hover {
color: #FFF;
}
I have a unordered list in my HTML with 5 lists that all had with links on them that were working fine. It was working fine until I added another unordered list, but i have no links inside it. I even gave it a separate class.
Here is my markup/CSS:
ul {
margin: 0;
list-style-type: none;
color: white;
diplay: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
}
ul li {
padding-left: 45px;
padding-right:45px;
display: inline;
text-decoration: none;
}
ul li a:hover {
font-weight:bold;
color:grey;
}
a {
text-decoration: none;
color:white;
}
<div id="mainPage" >
<img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;"> Ice Arena </h1>
</div>
<ul id="select">
<li>
<a style="color:#ffe700;" href="#">Home</a>
</li>
<li>
Gallery
</li>
<li>
Order Form
</li>
<li>
The Arena
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
I've only added the code regarding the list and area of my problem.
Add position: relative; to ul, otherwise other elements are above it and prevent the link behavior.
ul {
margin: 0;
list-style-type: none;
color: white;
diplay: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
/* added */
position: relative;
}
ul li {
padding-left: 45px;
padding-right: 45px;
display: inline;
text-decoration: none;
}
ul li a:hover {
font-weight: bold;
color: grey;
}
a {
text-decoration: none;
color: white;
}
<div id="mainPage">
<img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;">Ice Arena</h1>
</div>
<ul id="select">
<li><a style="color:#ffe700;" href="#">Home</a></li>
<li>Gallery</li>
<li>Order Form</li>
<li>The Arena</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Try deleting the CSS property (position:absolute;) in line 3.
How can I align the down arrow from material icons under the link text? I tried using the :after pseudo class, but it didn't work.
HTML:
<div class="jump-to-links">
<ul class="list-unstyled">
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i></li>
</ul>
</div>
SCSS:
.jump-to-links {
.material-icons {
#include centerX();
bottom: -20px;
color: $purple;
padding: 10px 0px 10px 0px;
}
text-align: center;
a,a:hover {
text-decoration: none;
color: $black;
font-weight: bold;
display: inline-block;
}
ul li {
display: inline-block;
margin-right: 12%;
}
li {
cursor: pointer;
text-align: center;
position: relative;
}
}
JSFIDDLE https://jsfiddle.net/kpvwwveL/6/
Add display:block to your
i{
display:block;
}
https://jsfiddle.net/kpvwwveL/3/
I discovered this as the best way to solve the alignment issue:
<div class="jump-to-links">
<ul class="list-unstyled">
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i>
</li>
<li>
Link<i class="material-icons"></i></li>
</ul>
</div>
.jump-to-links {
.material-icons {
#include centerX();
bottom: -20px;
color: $purple;
padding: 10px 0px 10px 0px;
}
text-align: center;
a,a:hover {
text-decoration: none;
color: $black;
font-weight: bold;
display: inline-block;
}
ul li {
display: inline-block;
margin-right: 12%;
}
li {
cursor: pointer;
text-align: center;
position: relative;
}
}
Why complicate things and not go the natural way? Which I think is to put line breaks between link text and i.
<a href="#">
Link
<br>
<i class="material-icons arrow-down">keyboard_arrow_down</i>
</a>
https://jsfiddle.net/weejoy22/