JSFIDDLE
When you hover over one of the first links (products,technology, etc), a dropdown menu appears and the link turns orange. It continues to stay orange as you hover over the dropdown menu. I remember doing something for it to behave this way, and I want to get rid of it now, but I cannot for the life of me remember how I did this, and cannot undo it. Anyone see how I can undo this?
Here's the css:
#navbar{
list-style: none;
float: right;
margin-top: 54px;
position: relative;
}
.firstnavmenu{
margin-top: 10px;
}
/*first level*/
#navbar li{
float:left;
width: 140px;
text-align: center;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
#navbar li a{
text-decoration: none;
font-family: "Open Sans", sans-serif;
font-size: 11px;
letter-spacing: 1px;
color: #524F4F;
font-weight: 600;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
#navbar li:hover > a{
color: #f3a82e;
}
#navbar li:hover > ul{
height: 250px;
}
/* second level */
#navbar li ul{
list-style: none;
position: absolute;
top: 100%;
height:0px;
overflow: hidden;
-o-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#navbar li ul li:last-child{
padding-bottom: 10px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-bottom-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;
}
#navbar li ul li{
float: none;
position: relative;
width: 140px;
height: auto;
background-color:rgba(255,255,255,0.7);
color:rgba(255,255,255,0.7);
padding-top:5px;
padding-bottom: 5px;
}
#navbar li ul li a{
padding-left: 10px;
text-align: left;
padding-top: 6px;
width: 90%;
height: 100%;
display: block;
}
than use
#navbar li a:hover{
color: #f3a82e;
}
instead of this
#navbar li:hover > a{
color: #f3a82e;
}
http://jsfiddle.net/fp5TM/1/
Related
I have a question regarding the text color of my drop down menu. The drop down text color is based off of the main link text color. When I select that link it changes to the current tab color, but also changes the drop down text color. I was wondering how to make the drop down menu color independent from the main tab text color.
Here is the HTML:
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
And here is the CSS:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
Any help would be awesome!
add the following at the end of your css script
ul#nav ul li a:hover{
color:red;
}
Example:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
ul#nav ul li a:hover{
color:red;
}
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
I created the fiddle using your code. While hovering over the drop down menu links, the text color changes to the blue as being used on the current menu tab. In case you don't want to use blue on text hover in the drop down menu and want to go with the white text links, just remove "ul#nav li:hover > a," from your code and it'll do the work.
Now your new CSS code should look like :-
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
In case you want to use some different color while hovering over the drop down text links, you need to use this code separately in the css :-
ul#nav li:hover > a {color:your color name or color code}
I have a dropdown menu in SilverStripe that works although when you hover over the space where the downdown part it shows up when I only want it to show up when you hover over the main menu item. I don't really know if that makes sense. I have included my code so you can maybe see what I mean.
CSS
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
height: 40px;
width: auto;
padding: 0;
margin: 0;
float: left;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
}
/* Links 8*/
.menu li a {
display: block;
padding: 0 20px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color: #f3f3f3;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
text-transform: uppercase;
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #D12D3C;
}
.menu li > a:hover {
color: #D12D3C;
}
.menu li > a.current {
color: #000;
background-color: #fff;
}
.menu li > a.section {
color: #000;
background-color: #fff
}
/* Sub Menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
text-transform: none;
text-transform: none;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
z-index: 9999;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: auto;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.sub-menu li:hover {
height: auto;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 210px;
padding: 4px 0 4px 30px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}
HTML
<div class="large-12 medium-12 header columns">
<img src="themes/Connected/images/Connected-banner.png" alt="banner" />
</div>
<div class="large-12 medium-12 band columns">
<ul class="menu">
<% control ChildrenOf(Home) %>
<li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML" style="text-transform:uppercase;">$MenuTitle</a>
<% if Children %>
<ul class="sub-menu">
<!-- Sub Menu -->
<% control Children %>
<li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<img src="/themes/Connected/images/search-icon.png" alt="search-icon" />
</div>
We can move the sub menu off screen until it is hovered by adjusting the top value.
CSS
.menu ul {
position: absolute;
top: -100000px;
left: 0;
opacity: 0;
background: #1f2024;
text-transform: none;
text-transform: none;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s, top 0s .35s;
transition: opacity .25s ease .1s, top 0s .35s;
z-index: 9999;
}
.menu li:hover > ul {
opacity: 1;
top: 40px;
-webkit-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
Demo
The benefit of doing this instead of hiding and showing the menu with display: none and display: block is this allows us to have a nice css transitions fade the menu in and out.
Try removing "opacity 0;" and change it to "display: none;" and "opacity: 1" to "display: block;". Because the sub menu is actually there even though you can't see it, so it is still being hovered on. This seems to be a pure css issue from what I can see. Hope that helps
So right now I have a working setup so that when the nav is bigger than the screen then a picture slider down works out. However, the problem is that the nav does not minisize soon enough as it goes over the logo. I want it to be more sensitive to take the logo size into account as well.
Right now this is how I'm achieving this.
HERE IS THE https://jsfiddle.net/q2ozq1q2/3/
/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 22px raleway-bold, sans-serif;
float: right;
margin-top: 36px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #14C9CF;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #fff; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #8a8383;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #1f2024;
min-width: 100%;
border-radius: 0 0 3px 3px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); }
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
You can see that it achieves it by this:
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
But it does not use the the logo to know exactly when it starts or stops. So the nav will overlay onto the logo. Is there a way to account for the logo?
EDIT
https://jsfiddle.net/q2ozq1q2/3/
If I understand you correctly, you can change the width on the media-query to around 990px like so: (on line 289 in the fiddle)
#media only screen and (max-width: 990px) {
Hey u can resize both image and navigation bar when viewed on smaller screen :
Use following css as example:
img {
max-width:250px;
max-height:250px;
}
#nav-wrap ul#nav {
position:absolute;
width:100%;
}
ul#nav ul li a{
word-break:break-all;
width:100%;
}
You should add a class for img tag -
header .logo a {
display: block;
margin: 0;
padding: 0;
border: none;
outline: none;
}
header .logo a img{
width: 210px;
height: 34px;
}
I have a footer with content in it. Problem I'm having is the content is displaying vertically instead of horizontally.
I've tried using float:right; that hasn't changed anything. Would really appreciate some help.
Also two of the three social icons aren't showing up. That might be because of the float issue though...
Here's my code
<div class="footer-grid">
<h3>More</h3>
<ul>
<li>FAQ</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="footer-grid">
<h3>Connect With Us</h3>
<ul class="social-icons">
<li>
<a class="facebook" href="#"> </a>
</li>
<li>
<a class="pinterest" href="#"> </a>
</li>
<li>
<a class="twitter" href="#"> </a>
</li>
</ul>
<p class="copy-right">Website by Elevate design</p>
</div>
Css:
.footer-grid {
min-width: 100%;
float: left;
background-color: #414141;
}
.footer-grid:nth-child(3n+1) {
margin-right: 0;
}
.footer-grid h3 {
color: #3D3D3D;
float: right;
font-size: 14px;
font-family: 'arial';
margin-bottom: 0.8em;
}
.footer-grid ul li {}
.footer-grid ul li a {
color: #8C8C8C;
font-size: 14px;
transition: 0.5s all;
margin-right: 10px;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid ul li a:hover {
zoom: 1;
filter: alpha(opacity=75);
opacity: 0.7;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
.social-icons li {
display: inline-block;
}
.social-icons li a {
width: 72px;
height: 72px;
display: block;
}
.social-icons li a.facebook {
background: url(../images/facebook_icon.png) no-repeat 0px 0px;
}
.social-icons li a.twitter {
background: url(../images/twitter_.png) no-repeat -56px 0px;
}
.social-icons li a.pinterest {
background: url(../images/pinterest.png) no-repeat -112px 0px;
}
.footer-grid p {
color: #A2A2A2;
font-size: 14px;
line-height: 1.5em;
padding: 0 0 0.4em 0;
}
.footer-grid input[type="text"] {
width: 84%;
margin: 0.4em 0 1em;
padding: 0.8em;
border: 1px solid #C3C3C3;
transition: border-color 0.5s all;
-webkit-transition: border-color 0.5s all;
-moz-transition: border-color 0.5s all;
-o-transition: border-color 0.5s all;
font-family: 'open_sanssemibold';
color: #3D3D3D;
outline: none;
border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-o-border-radius: 0.5em;
}
.footer-grid input[type="text"]:hover {
border: 1px solid #999;
}
.footer-grid input[type="submit"] {
background: #F36EA7;
padding: 0.8em;
display: block;
width: 100%;
font-family: 'arial';
color: #FFF;
border: none;
font-size: 14px;
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-o-border-radius: 0.3em;
outline: none;
cursor: pointer;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid input[type="submit"]:hover {
background: #EE639F;
}
.footer-grids {
padding: 3em 0 5em;
}
.copy-right {
margin-top: 1em;
}
.copy-right a {
color: #A2A2A2;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.copy-right a:hover {
color: #F36EA7;
}
you forgot to put display:inline-block in .footer-grid ul li
.footer-grid ul li{
display:inline-block;
}
My main navigation bar is like this: JSFIDDLE
<div id="navbar">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Projects</li>
<li id="active">Contact</li>
<li>Friends</li>
</ul>
</div>
The css for it is as follow:
#navbar {
float: left;
height: 100px;
width: 395px;
background-color: orange;
background-color: #CCCCCC;
background-image: url(../images/1_03.jpg);
}
#navbar ul{
list-style-type: none;
margin-top: 30px;
}
#navbar li{
float: left;
text-align:center;
width: 60px;
}
#navbar a:link, a:visited {
display: block;
width: 100%;
height: 50px;
font-size: 14px;
color: rgba(141,141,141,1);
text-decoration: none;
padding-top: 20px;
font-family: Raleway, sans-serif;
-moz-transition: background-color 0.3s ease;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
font-weight: 500;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#navbar a:hover, a:active {
color:white;
background-color: #ff7200;
}
#active > a {
display: block;
color: white;
background-color: rgba(51,51,51,1);
}
Now I have on contact page my icon images, which links to the user's profile on Facebook, Twitter, etc., but they get the same background when in active state like my navigation bar. How can I change that?
I think your problem is in your way of defining css :
#navbar a:hover, a:active should be #navbar a:hover, #navbar a:active