I have read at least 5 other questions and tried the answers, and other similar questions and answers and tried to adjust the code to fit in with mine but it just won't work.
The code is for an eBay product description, so it cannot contain any script/active content.
All I need is for my header links to change to black when hovered over. It is not a list.
I do have a list navigation in a sidebar and I managed to produce the hover effect on that just fine with the following css:
nav ul li a {
color: #ffffff;
text-decoration: none;
margin-left: 2%;
}
ul li a {
display:block;
}
ul li a:hover, ul li a:focus {
color: #000000;
}
The HTML code for the Header Nav Links I need to add the hover to is:
<body>
<div id="mainwrapper">
<header>
<div id="logo">
<img src="https://lorempixel.com/400/200" alt="Store logo">
<nav>
About Us
FAQ
Contact Us
Feedback
Add to Favourites
</nav>
</div>
</header>
</div>
</body>
The CSS for this is:
#mainwrapper header nav {
/*Nav bar containing links in header */
background-color: #8fb2d5;
text-align: right;
padding-top: 45px;
padding-bottom: 12px;
padding-right: 1%;
width: 50%;
float: left;
color: #ffffff;
}
header nav a {
/* Links in header */
padding-right: 2%;
}
I have already tried adding the following:
header nav a:hover, header nav a:focus {
color: #000000;
}
and
header nav a:hover{
color: #000000;
}
Any help would be much appreciated. I apologise if this is a repeat post but I have looked at other questions/answers with no luck so far.
Is this what you need?
#mainwrapper header nav a:hover {
color: black;
}
<div id="mainwrapper">
<header>
<div id="logo"><img src="http://www.saltdepot.co.uk/ebay/himalayan/BlogPostAssets/images/logo3.png" alt="Himalayan Salt Store">
<nav>About Us FAQ
Contact Us
Feedback
Add to Favourites</nav>
</div>
</header>
</div>
Try to use #mainwrapper header nav a:hover as a selector, that has more specifity.
Related
I tried
<div>
<tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
<tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>
resulting in
Home
Contact
How can I align these tags side by side?
either display:inline or float:left which gives more control (but needs <div style="clear:both"></div> afterwards)
h1 {
float: left;
margin-right: 10px;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
nav {
display: flex;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
try this:
{
display: inline-block
};
Ideally, you might benefit from a review of your markup.
Certainly you shouldn't be using multiple <h1> elements within a single document.
The <h1> is the principal heading of the entire document. By definition that means there will only ever be one.
Whenever you want to change the visual presentation of an element, you will use CSS.
HTML Structure
If you are building a navbar, then you can use:
<ul> - an unordered list
and nest this inside a:
<nav> - a navigation element
CSS Presentation
Once you have a structure like the outline above, there are multiple ways to align elements side-by-side:
nav ul { display: flex; }
nav ul { display: table; }
nav ul li { float: left; }
nav ul li { display: inline-block; }
When starting out, one of the simplest ways is to use the last option immediately above:
nav ul li {
display: inline-block;
}
Working Example:
nav {
background-color: rgb(191, 0, 0);
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
width: 96px;
height: 48px;
line-height: 48px;
text-align: center;
}
nav ul li a {
font-family: sans-serif;
color: rgb(255, 255, 255);
font-weight: 900;
}
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
I'm trying to make the current page's title change colour in the navigation bar that I have at the top of my website. The navbar is built in html with:
<div class="navbar">
<a href="index.html" class="active" >Home</a>
Indian
Italian
</div>
and the CSS that attempts to style it is:
.navbar{
overflow: hidden;
background-color: #F5861F;
width: 100%;
}
.navbar a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:active{
color:#ffe7d1;
}
.navbar a:visited{
color:#8b4e14;
}
.navbar a:hover{
color:#874404;
font-size:20px;
}
.navbar a:current{
color:#ffe7d1;
}
The .navbar a:current is left there after I read that active may not do as I hope (I changed class="active" to class="current") but this also doesn't work.
What am I missing here?
try this
a.active {color: red}
a:active is not representing a class but a selector for a pseudoclass of <a> element
https://www.w3schools.com/css/css_pseudo_classes.asp
:active is where the mistake is.
Try this
.navbar a.active{
color:#ffe7d1;
}
I am working on a navigation bar Active color on my navigation bar is not working.Hover is working fine but not the active.In when from browser i select toogle element state and click on active browser change the color on clicking active state but in normal condition its not working.i am stucked and very confused , can someone help me please ? Thanks in advance.
.main-nav {
color: #FFF;
width: 100%;
background-color: #5e2d91;
float: right;
line-height: 42px;
margin-top: -3px;
}
.main-nav ul li {
display: inline;
padding: 0px 10px;
}
.main-nav ul li a {
color: #FFF;
text-decoration: none;
padding: 20px 14px;
}
.main-nav ul {
margin-bottom: 7px !important;
}
.main-nav ul li a:hover {
background-color: #0098aa;
}
.main-nav ul li a:active {
background-color: #0098aa;
}
<nav class="main-nav">
<ul>
<li> Home
</li>
<li> Trade Now
</li>
<li> Transactions
</li>
<li> Performance
</li>
<li>History
</li>
<li class="time">US Markets Open in <span id="hm_timer" class="style colorDefinition size_sm">08:05:35</span> hours</li>
</ul>
</nav>
your code working fine on fiddle there is might be some other css overwriting your code
try this
body .main-nav ul li a:active{
background-color:#0098aa;
}
if its not works try adding important // not recommended
body .main-nav ul li a:active{
background-color:#0098aa!important;
}
I recommend you to inspect element on that link and check active state, there might be some other css overwriting ur code
In your code, the background-color for :active is same as hover, so it's working but you can't see it. Change it to some other color and it would work.
In case of your website, I don't see any CSS selector as :active. Are you sure you've written it there?
In your site marketinthepocket.com you have mentioned background color as white. changing for color will work out.
body .main-nav ul li a:active {
background-color: red;
}
I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.
I'm trying to create nav bar similar to that of Uber's site. Where there's a menu button on the left, logo in the center, and then log in and sign up are on the right.
I used and div container="pull-right" and still couldn't get the Title to be center. The buttons won't be stylized much more than what they are since they will be on a white background.
<div class="nav">
<div class="container">
<ul>
MENU</button></li>
TITLE</button></li>
SIGN UP</button></li>
LOG IN</button></li>
</ul>
</div>
</div>
.nav{
color: #5a5a5a;
font-size: 15px;
font-weight: normal;
padding: 15px 15px 5px 5px;
word-spacing: 3px;
}
.nav li {
display: inline;
}
.nav button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline: none;
}
.nav a{
color: inherit;
}
Here's my Jsfiddle: https://jsfiddle.net/tokyothekid/r19y23ep/1/
you can try this fiddle
demo
in this i have manage the structure of your li and as per your description i make a design i hope it may help you
.col1
{
margin:0;
padding:0;
float:left;
width:50%;
}
Quick answer
If you want something like the website for Uber, you probably need to separate the Menu from the buttons on the right side.
Other notes
Also, HTML5 has specified special tags so code is more readable and organized, such as the <nav> tag to hold your main menu. <div> doesn't communicate the purpose of the container.
To do what you want, here is a to-do list:
fix your bugs (<a href="somewhere"<li><button>foobar</button></li></a> actually is an error because of the lack of right bracket > at the end of your opening <a> tag)
separate your elements into a menu, a title, and a couple of user account buttons
The code
Here is a good example of how you could restructure your HTML:
<h2 class="top-title">Title</h2>
<nav>
<button id="toggle-menu">Menu</button>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
<div class="user-buttons">
<button>Log in</button>
<button>Sign up</button>
</div>
This is a quickly hacked bit of CSS you might use to start with:
h2 {
display: inline-block;
width: 100vw;
text-align: center;
margin: 0;
position: absolute;
z-index: -1;
}
nav {
float: left;
}
nav ul {
list-style-type: none;
padding: none;
position: absolute;
}
nav ul a {
text-decoration: none;
text-transform: uppercase;
color: inherit;
}
div.user-buttons {
float: right;
}
Add some Javascript, and voila:
$(function() {
$("nav ul").hide();
$("#toggle-menu").click(function() {
$("nav ul").toggle();
});
});
JSFiddle example.