I can't seems to put it together on my brain after almost practicing for 24 hours.I need help on changing the button text color to white, while the rest stay the same color
//NAVIGATION
//========================
.nav ul
display: flex
padding-left: 0
padding-top: 15px
.nav li
list-style: none
padding: 10px
.nav ul li a
text-decoration: none
color: #000000
.nav ul li:last-child
color: #FFFFFF
.nav ul li a:hover
color: #5c6ac4
.nav li:not(:last-child)
margin-right: 20px
.nav li:nth-child(3)
margin-right: auto
//BUTTON
//==============
.btn
width: 160px
height: 20px
//border: 1px solid #5c6ac4
background: #5c6ac4
border-radius: 5px
box-shadow: 0 0 20px rgba(0,0,0,0.2)
padding: 10px 15px 10px 15px
.btn:hover
background: #212b35
transition: background-color .6s ease-out
<nav class="nav">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
I've prepared an image on my particular issue
You've already defined a color in .nav ul li a. You either need to overwrite that by adding color: white !important to .btn or change the structure of your code.
Handling a CSS file with many !important tags could become difficult in large projects, so try to avoid it.
Add color: white; to .btn {..} in css file (and comments in css are /* comment */:
.btn {
color: white;
width: 160px;
height: 20px;
/* border: 1px solid #5c6ac4; */
background: #5c6ac4;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
padding: 10px 15px 10px 15px;
}
first you can't use preprocessor just like that, you should convert it to CSS and then use that CSS, and in CSS comments are /*...*/ and rules are like .btn{ key:value; }
so after converting your sass to css we have :
/* Navigation */
.nav ul {
display: flex;
padding-left: 0;
padding-top: 15px;
}
.nav li {
list-style: none;
padding: 10px;
}
.nav ul li a {
text-decoration: none;
color: #000000;
}
.nav ul li:last-child {
color: #FFFFFF;
}
.nav ul li a:hover {
color: #5c6ac4;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-child(3) {
margin-right: auto;
}
/* Button */
.btn:hover {
background: #212b35;
transition: background-color .6s ease-out;
}
a.btn {
width: 160px;
height: 20px;
/*border: 1px solid #5c6ac4;*/
background: #5c6ac4;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
padding: 10px 15px 10px 15px;
}
<nav class="nav">
<ul>
<li>Work</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
Related
I have been trying to create my first html and css website, but right now I'm stuck in the navigation because I'm trying to do a hover effect in the links, what I want is when you hover a link, a box should appear over a link, this box will have a shadow, can you help me out?
Thank you!!
Here is my nav code atm:
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li>ABOUT US</li>
<li>SEARCH</li>
<li>TOP ARTISTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
css:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000; }
.main-nav li{
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
}
.main-nav li a:link
.main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
transition: background 0.3s ease-in-out;
}
Example of what I want: https://w3layouts.com/preview/?l=/boombox-a-entertainment-category-flat-bootstrap-responsive-template/
Here is a code snippet with your intended behavior:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000;
}
.main-nav li {
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
padding: 4px;
border-radius: 4px;
}
.main-nav li a:link .main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
box-shadow: 4px 4px 4px #000;
transition: background 0.3s ease-in-out;
}
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li>ABOUT US</li>
<li>SEARCH</li>
<li>TOP ARTISTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
I added padding: 4px; and border-radius: 4px; to your .main-nav li a selector and I added box-shadow: 4px 4px 4px #000; to your .main-nav li a:hover, .main-nav li a:active selector. I hope this helps.
Have you something like this?
nav ul li a:hover {
background-color: #333333;
color: #FFFFFF;
box-shadow: 2px 10px 8px #888888;
}
I have created a navbar its <li class="active"> is not showing desired result.
It is showing like this:
I have used same css for my .active and .hover. My .hover is working fine but .active is not.
This is Html code:
<div class="navbar">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Servies</li>
<li>Contact</li>
</ul>
</div>
and this is CSS:
/*navbar css*/
.navbar{
width: 920px;
height: 37px;
text-align: right;
text-shadow:3px 2px 3px #321;
background-color: #666633;
border-radius: 5px;
}
.navbar ul{
list-style-type: none;
height: auto;
padding: 8px 0px;
margin: 0px;
}
.navbar li{
display: inline;
padding: 20px;
font-family: 'Play', sans-serif;
font-size: 18px;
font-weight: bold;
}
.navbar a{
text-decoration: none;
color: #999966;
padding: 8px 8px 8px 8px;
}
/*you can see here i add css for hover and active*/
.navbar a:hover, .navbar li.active{
color: #CCCCB2;
background-color: #999966;
}
This is its fiddle
I want to ask why they have different result even there css is same?
This is because you are applying the active class to your li item, and not your link item. I think you will find that if you instead write
<li ><a class="active" href="#">Home</a></li>
and your css to
.navbar a:hover, .navbar a.active{
color: #CCCCB2;
background-color: #999966;
}
here is my fiddle
Each <li> element is larger than the <ul> container due to padding.
Try it with padding: 8px;
.navbar a:hover, .navbar li.active{
padding: 8px;
color: #CCCCB2;
background-color: #999966;
}
Js Fiddle Demo
It is because you have a padding: 20px; to .navbar li
Check out this or maybe this.
you have to change => .navbar li{padding: 8px 20px;}
or
.navbar a{padding: 8px 24px;}
.navbar li{padding: 8px 10px;}
I want to have a border (looks like underline) that moves up on hover.
So if this is a link:
LINK
Then if I hover on it
LINK
""""
Example from the website:
http://matthias-schoenaerts.com/
(navigation bar)
I want it as simple as possible.
This is what I came up with:
http://jsfiddle.net/Lxxqz3pL/
HTML:
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
CSS:
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}
#nav li a:hover {
transition: border .5s ease-in;
background-color: #fff;
border-bottom: 3px solid red;
}
/* End navigation bar styling. */
Here is updated CSS, does it what you trying to get?
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position: absolute;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}
#nav li a:after{
display:block;
width:100%;
height:0px;
content:" ";
border:1px solid red;
position: relative;
top:10px;
}
#nav li a:hover:after{
transition: 0.5s ease-in;
transform: translate(0px, -10px);
}
/* End navigation bar styling. */
I've modified your code in areas to get the desired effect
DEMO http://jsfiddle.net/Lxxqz3pL/3/
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
padding: 22px 0 35px;
color: #a3a3a3;
border-bottom: 3px solid #6a901b;
transition: all 0.5s ease;
}
#nav li a:hover {
transition: all 0.5s ease;
color: #fff;
padding-bottom: 5px;
}
How about something like this? FIDDLE.
Just keep the background fixed, add a border at the bottom, and make the height of the anchor smaller.
Relevant CSS
#nav li {
float: left;
height: 40px;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
height: 20px;
transition: height 0.5s;
}
#nav li a:hover {
height: 10px;
border-bottom: 3px solid red;
}
It looks like the example site uses flexNav, a jQuery plugin.
http://jasonweaver.name/lab/flexiblenavigation/
Here's a quick-fix solution. I added a transition to <li> padding to compensate for the added border.
http://jsfiddle.net/Lxxqz3pL/1/
I'm using ordered lists to create a menu, and I have run into two issues, the drop down does not align and the hover effect is applied to the drop downs and I don't want that to happen
Here is a JS Fiddle:
http://jsfiddle.net/HFMR5/
this is my HTML code:
<div id="menu">
<ul id="navigation">
<li>Home</li>
<li>Services
<ul>
<li>Residential</li>
<li>Buisiness</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
and this is the CSS for the menu:
/*Navigation CSS*/
#navigation
{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
box-shadow: 0 8px 6px -6px black;
}
#navigation li
{
float: left;
}
#navigation li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FF6987;
border-right: 1px solid #ccc;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
#navigation ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#navigation li:hover ul {
display: block;
position: absolute;
}
#navigation li:hover li {
float: none;
font-size: 11px;
}
#navigation li:hover a { background: #f2f2f2; }
#navigation li a:hover
{
color: #FF6987;
background-color: #f2f2f2;
box-shadow: inset 0 8px 6px -6px black;
}
In order for the widths to be the same you need to actually set the width of the sub-menu (Not necessarily static) but if you let it be then it will just expand to the size of the contnent which obviously isn't desired, the CSS changes look like:
#navigation li{
float: left;
position:relative;
}
#navigation li:hover ul {
display: block;
position: absolute;
width: 100%;
}
The position: relative has the sub-menu know to use that element when determining what 100% width is instead of the body tag.
As for the hover effect showing up on sub-menu items all that you need to do is be more specific in your selector. The space you are using signifies that you will select and descendant of #navigation that is a li element. That includes the submenus. If you use a selector like the > which signifies a direct child then you will be able to bre more specific in targeting only top level menu items. CSS looks something like:
#navigation > li > a:hover{
color: #FF6987;
background-color: #f2f2f2;
box-shadow: inset 0 8px 6px -6px black;
}
A good reference for CSS selectors: http://www.w3schools.com/cssref/css_selectors.asp
I've made a css dropdown menu and I want each dropdown option to have a blue background when it is hovered on. However when I try this the background for the option will only be blue when the top half of it is hovered on. Here it is on jsfiddle. If you hover your mouse on the "products" option and then put the mouse under "plates" but above the gray horizontal line the background won't be blue. Can anybody help me? Thank you.
http://jsfiddle.net/hDWuJ/1/
HTML (Note this is a segment of my web page and so it does not have valid syntax)
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
<ul id="drop-nav">
<li>Home</li>
<li>Products <span id="arrowDown">▼</span>
<ul>
<li>Children's Stuff</li>
<li>Plates</li>
<li>Top Sellers</li>
</ul>
</li>
<li>Services <span id="arrowDown">▼</span>
<ul>
<li>Wash 'n' Fold</li>
<li>Blanket Making</li>
<li>Wedding Dress</li>
<li>Custom</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS
body
{
background-color: #dfdfdf;
}
#title
{
text-align: center;
color: #07a8ca;
font-size:60pt;
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 0px #888888;
}
h1
{
margin: 0px;
padding: 0px;
}
hr
{
height: 3px;
color: #07a8ca;
background: #07a8ca;
font-size: 0;
border: 0;
}
#HorzLineDiv
{
width: 95%;
margin: 2% 0% 3% 0%;
margin-left: auto ;
margin-right: auto ;
}
#Menu
{
width:100%;
}
#drop-nav
{
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
display: inline;
padding: 12px 50px 8px 50px;
margin: 0px 5px 0px 5px;
border-left: 3px solid #07a8ca;
}
ul li:first-child
{
border-left: 0px;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-transform: uppercase;
text-decoration: none;
text-align:center;
color: #000;
font: 25px/1.1em "Kelly Slab","serif";
transition: color 0.4s ease 0s;
-moz-transition: color 0.4s ease 0s; /* Firefox 4 */
-webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
-o-transition: color 0.4s ease 0s; /* Opera */
}
ul li a:hover
{
color: #FF4D4D;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
li:hover a
{
margin:0;
}
li:hover li a:hover
{
background: #21e8fa;
}
#drop-nav li ul li
{
border-top: 0px;
border-left: 0px;
}
#drop-nav ul li a
{
border-top: 3px solid #888;
padding: 13px 0px 13px 0px;
margin: -10px -8px;
text-align:center;
text-transform: none;
position:relative;
top: 13px;
color: #000;
}
#drop-nav ul
{
width:100%;
position:absolute;
right:-5px;
}
a
{
margin:0px;
padding:0px;
}
#arrowDown
{
font-size: 10pt;
vertical-align:text-bottom
}
The main issue is in your margins and padding, but this can be worked around by changing your ul li to display: block; instead of display: inline;.
Of course, this isn't a direct fix to the issue, and there still is an area at the bottom that doesn't work on hover, but it is much smaller than before. The proper way to go about fixing this is fixing your margins and padding.
Demo
UPDATE
Reading deeper into your code, I found the actual problem. It is not in margins or padding as I originally thought, but is a top property of 13px defined in #drop-nav ul li a. That top of 13px was creating a blank, inactive space in your list.
Get rid of that piece and it is working fine: DEMO