Clash Royale CLAN TAG#URR8PPP

CSS class takes no valid effect

TL;DR

Here's my CSS code and HTML code

<div class="navbar">
<nav>
<span id="logo">
<a href="index.html">Logo</a>
</span>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
</div>


CSS:

*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;



Result: https://imgur.com/a/c6rWS3V (2nd image)

If I swap * for class .navbar then I get the following result (image 2, thanks!)
https://imgur.com/a/c6rWS3V (1st image)

LONG VERSION BELOW: (if you swap * to .navbar, it won't work) Question is why?

*
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;


nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;


nav #logo
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;


nav #logo a
color: #fff;
transition: all 0.3s ease-out;
font-family: 'Poppins', sans-serif;
font-weight: 300;


nav .menu
float: left;
left: 50%;
position: relative;


nav .menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;


nav .menu li a
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 200;


#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;


#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;


#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);


#toggle.on #two
opacity: 0;


#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);



@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;

nav #logo
margin-left: 18px;

.menu a
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 20px;

nav .menu
display: none;


@media only screen and (max-width: 1366px) and (min-width: 1024px)

.menu a
position: relative;
margin-left: -30px;
font-size: 2vw;


@media only screen and (width: 812px) and (min-width: 375px)/* IPHONE X */

.menu a
position: relative;
margin-left: -80px;
font-size: 2vw;


@media only screen and (width: 823px) and (min-width: 411px) /*GOOGLE PIXEL 2XL */

.menu a
position: relative;
margin-left: -120px;
font-size: 2vw;



<div class="navbar">
<nav>
<span id="logo">
<a href="index.html">Logo</a>
</span>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
</div>

Thank you!
p.s I tried my best to use this editor, still new! Although I think I did "alright job" :D

1 Answer
1

Always add text-decoration:none to a tag

text-decoration:none

a

.navbar #logo a
text-decoration:none;



*
css rules



are applied to everything (including a tag), that is why you were not getting underline for logo.

a

*
margin: 0;
padding: 0;
/* text-decoration: none;*/ /* Comeented for sake of answer*/
list-style: none;


nav
width: 100%;
background: #000;
height: 70px;
position: static;
z-index: 1;


nav #logo
float: left;
display: block;
margin-left: 84px;
font-size: 30px;
line-height: 70px;
font-weight: bold;


nav #logo a
color: #fff;
transition: all 0.3s ease-out;
font-family: 'Poppins', sans-serif;
font-weight: 300;


nav .menu
float: left;
left: 50%;
position: relative;


nav .menu li
display: inline-block;
padding: 0px 30px;
cursor: pointer;
line-height: 70px;
position: relative;
transition: all 0.3s ease-out;


nav .menu li a
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 200;


#toggle
position: absolute;
right: 20px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;


#toggle .span
height: 3px;
background: #fff;
transition: all 0.3s ease-out;
backface-visibility: hidden;
margin: 5px auto;


#toggle.on #one
transform: rotate(45deg) translateX(2px) translateY(4px);


#toggle.on #two
opacity: 0;


#toggle.on #three
transform: rotate(-45deg) translateX(8px) translateY(-10px);



@media(max-width: 768px)
#toggle
visibility: visible;
opacity: 1;
margin-top: 6px;

nav #logo
margin-left: 18px;

.menu a
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 20px;

nav .menu
display: none;


@media only screen and (max-width: 1366px) and (min-width: 1024px)

.menu a
position: relative;
margin-left: -30px;
font-size: 2vw;


@media only screen and (width: 812px) and (min-width: 375px)/* IPHONE X */

.menu a
position: relative;
margin-left: -80px;
font-size: 2vw;


@media only screen and (width: 823px) and (min-width: 411px) /*GOOGLE PIXEL 2XL */

.menu a
position: relative;
margin-left: -120px;
font-size: 2vw;



.navbar #logo a
text-decoration:none;


<div class="navbar">
<nav>
<span id="logo">
<a href="index.html">Logo</a>
</span>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="toggle">
<div class="span" id="one"></div>
<div class="span" id="two"></div>
<div class="span" id="three"></div>
</div>
</nav>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.