If I set the styling font color in my unordered list for my navigation bar, how can I over ride that with a .class on a specific element?
For example, here's my navigation:
Home
Services
About
Contact us
And so I set in my CSS for the navigation font color to be #000.
Now what do I do if I want to over ride just one of the elements to be a specific color with a class? Because I try using a class on one of them, but it doesn't over ride it.
If each of the elements are under their own li you can set one of those li's like this
li class="home" Home li and in css put .home {color:#000} if I read the question right this should help if not sorry I'm new to this.Sorry I would write it in code, but still have to get familiar with this site.
You can use the :active pseudo element.
If your HTML is:
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
You can do this with CSS:
nav a {
color: #000;
font-size: 14px;
font-weight: 600;
}
nav a:hover {
color: #3e82f7;
}
nav a:active {
color: #db4437;
}
nav a:visited {
color: #ffeb3b;
}
If you're trying to indicate what page the user is on, you probably want to structure your HTML along these lines:
<nav>
<ul>
<li><a class="current-page" href="home.html">Home</a></li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
And your CSS:
nav a {
color: #000;
font-size: 14px;
font-weight: 600;
}
.current-page {
color: #3e82f7;
}
Related
This is my html for this particular section:
<nav id="TopNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
I have given nav an id of TopNav and the ul an id of Menu. I'm trying to have my li items be listed horizontally.
This is my CSS for the section above:
#TopNav {
font-family: ubuntu-medium;
font-weight: normal;
font-size: 15px;
color: #414141;
}
li {
border: 0px;
padding: 0px 10px;
display: inline;
}
Now if I change the li to reference the id "Menu" in my css it doesn't apply the inline display style, however if I leave it at li, it will display it. What if I potentially add another li to my html that I don't want the li styling from the css to apply to that which is why I gave the current one an ID. Is there's a reason this is happening? How do I fix it or what is a good workaround for it?
Be as explicit as you can be when writing your selectors.
In this case, you could identify the correct li elements by ensuring that they are the ones that are in Topnav AND in that particular list.
#TopNav {
font-family: ubuntu-medium;
font-weight: normal;
font-size: 15px;
color: #414141;
}
#TopNav #Menu li {
border: 0px;
padding: 0px 10px;
display: inline;
}
<nav id="TopNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
There are several things you can select on, not just element types and class names. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors for more details.
Trying to change colors when hovering over navigation links, never had a problem before but it will not work.
I have my navigation in several div's, I tried to set my a link style to all divs, nothing changes at all. I originally made my code in a CSS class. Trying to make a responsive website at home, didn't have links in the navigation bar originally, just text.
a.navBar:link {color: white; text-decoration: none; }
a.navBar:visited {color: white; text-decoration: none; }
a.navBar:hover {color: #16262E; text-decoration: underline; }
a.navBar:active {color: white; text-decoration: underline; }
<div id="outerWrapper"> </div>
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
I just want white text as navigation links that turn #16262E when the mouse is hovering over the link. Not receiving any errors, it just doesn't change from the default blue, underlined links.
a.navBar means that you are selecting a link tag wich have class 'navBar'. This selector does not exist.
No link tag have a class navBar.
To solve this you can apply color changing when you hover the list tag.
Use this selector :
#navBar ul li:hover a {color : #000fff}
This means that when you hover li (which is located inside #navBar) change the link color
Step 1
Remove a from starting of a.navBar.
Step 2
Change .navBar to #navBar you are declaring id attribute in element <div id="navBar">.
Step 3
Add space and a between #navbar and Pseudo-elements.
Below code snippet have all above mentioned fixes. Try this I hope it'll help you out. Thanks
body {
background-color:grey;
}
#navBar a:link {color: white; text-decoration: none; }
#navBar a:visited {color: white; text-decoration: none; }
#navBar a:hover {color: #16262E; text-decoration: underline; }
#navBar a:active {color: white; text-decoration: underline; }
<div id="outerWrapper">
<div id="navWrapper">
<div id="navInnerWrapper">
<div id="navBar">
<ul>
<li>About</li>
<li>Our Work</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<body>
<ul>
<li><a class="navBar" href="#">About</a></li>
<li><a class="navBar" href="#">Our Work</a></li>
<li><a class="navBar" href="#">Contact Us</a></li>
</ul>
</body>
I have removed other div which are not nested properly.
Now put CSS inside "style" tag.
I will suggest to change either text-color or background-color, as text isn't visible on white background.
So I'm learning to make websites in html and css. recently i encountered the error which didn't happened to me before: then i adding border to link in css, i cant get bottom and top borders to appear (that's a huge issue because i want to use border-bottom)
a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}
however if I'm adding border-bottom: to navigation li{} im getting this border
(#navigation li{} is list items surrounded by
<a href="..." class="navi">
tags)
Html code:
<nav id="navigation">
<ul>
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
</nav>
Put your <a> tags inside your <li> tags.
For example:
<li>Home</li>
Here is a working example: https://jsfiddle.net/kb3su8og/
I'm assuming you want your links underlined, which would be better if you created a div underneath the link and the colored that appropriately, but to do borders try something like this for your html:
<nav id="navigation">
<ul class="navi">
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
and have your css reflect the changes with:
navi > a:hover {
border-bottom //that stuff
What that does is when a link is hovered over it does whatever you want. I am away from my computer so I can not test the code but I think this will work if not there are tons of youtube tutorials on this exact matter. Have a nice day!
Make sure you are using <a> tag inside <li> tag, it should be
<nav id="navigation">
<ul>
<li>Stuff</li>
</ul>
</nav>
ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}
<nav id="navigation">
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</nav>
I think the more standard way to do what you want would be to put your a tags inside your li's, and use styles to make sure they fill the whole space, such as display: block.
ul {
list-style: none;
width: 200px;
}
li a.navi {
display: block;
padding: 5px;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
li a.navi:hover {
background-color: #cccccc;
}
<ul>
<li><a class="navi">One link</a></li>
<li><a class="navi">Second link</a></li>
</ul>
This may not be the style you are going for, I'm just guessing based on the snippet you provided.
So I want to format a horizontal navigation list. In my HTML page it says:
<nav class="horizontal">
<ul>
<li>Home</li>
<li>News & Events</li>
<li>Bookings</li>
<li>Members Only</li>
<li>Support GCC</li>
</ul>
</nav>
So in my css file I put this but it doesnt seem to work:
Nav.Horizontal {
background-color:rgb(0,0,0);
color: rgb(255,255,255);
font-weight: bold;
font-size:10px;
letter-spacing:3px;
}
a:Nav.Horizontal {
color:rgb(255,0,0)
}
This should do the trick:
nav.horizontal li {
display: inline-block;
}
Also a:Nav.horizontal is an incorrect selector. In CSS, the : selector is used to select elements in a special state, like a visited link or a checked input. See pseudo-clases.
If you want to style a inside your nav you should write nav.horizontal a. (Notice nav is in lowercase).
Here is the menu html code for the nav bar:
<nav>
<div id="menu">
<ul>
<li>Home Page</li>
<li>History</li>
<li>Events</li>
<li>Information</li>
<li>Photos</li>
<li>Contact Us</li>
<li>Useful Links</li>
</ul>
</div>
</nav>
and here's the code for css :
nav{
float: left;
margin-top: 15px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;
}
nav li {
display: inline-block;
}
nav a {
padding: 8px 0px;
margin-right:71px;
color: #ffffff;
display: block;
text-decoration: none;
text-transform: capitalize;
font-size: 13px;
}
nav a:hover {
color: #cccccc;
}
So for example, if I am currently looking at history page, the text "History" in the navbar will be red. How can I do such a thing?
#edit: As stated in a comment, I am trying to avoid jquery.
This is a great resource for beginners: W3Schools
This page on that site contains the answer to your question: CSS Text Formating
I don't mean to be vague, but your question is a little unclear.
just add active class name in the active state link.
<li>Home Page</li>
<li>History</li>
<li><a class="active" href="events.html">Events</a></li>
<li>Information</li>
And in your CSS
nav a.active {
color: red;
}
You will need to use jQuery to add an active class to the anchor tag that corresponds with the page that you are on. Once that is done you can style it like this a.active {color:red}
If these are individual HTML pages you could also just manually apply the active class to the anchor tag for that page.
The CSS attribute you are describing is a CSS selector. Your CSS will be as follows, which will target all "active" hrefs in the div ID menu
#menu a:active {
color: blue;
}