The site I am working on can be found here.
In IE7 ONLY:
The active navigation tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
Can someone explain how to fix this?
All I can see is that there is a problem with your "active" class in your /css/app.min.css file, or there is some javascript going on somewhere that is behaving incorrectly. You might be saying, "Duh!"
I can't tell with the tools that I have on hand. On the other hand, I was able to see that no "jumping" would occur when I removed the "active" class from the link in question. However, the link appeared just liked the rest of the items in the navigation, and you want it to look...uh...active.
If it is an issue somewhere in your scripts, and you don't know what it is, then perhaps change the name of the class and find the logic that sets the link to being active to reflect the name of the new active class.
I would start by commenting-out the existing styling associated with your "active" class and gradually build up to how you want it to appear by reintroducing some of the prior styling and refreshing the page on each small change until you find the problem.
I believe these are all of the problematic styles that need to be changed.:
#tabnav ul#dash-nav li.active a{
margin-left:-8px;
margin-right:-6px;
margin-top:-6px;
position:relative;
background-color:transparent;
}
#tabnav ul#dash-nav li.active a span{
background:url("/images/bg-nav-hover-l.png") no-repeat scroll 0 0 transparent;
color:#fff;
padding:7px 1px 1px 18px;
}
#tabnav ul#dash-nav li.active a .arrow{
display:block;
}
#tabnav ul#dash-nav li.active a:hover .arrow{
display:block;
}
#tabnav ul#dash-nav li.active a img,#tabnav ul#dash-nav li a:hover img{
margin-top:-21px;
}
#tabnav ul#dash-nav li.active a em{
background:url("/images/bg-nav-hover-r.png") no-repeat scroll 0 0 transparent;
height:34px;
width:17px;
}
How about putting a fix for IE7 inside a conditional comment?
Related
I'm trying to get the active page link on this Shopify store to have a top white border. Tried all sorts of things and nothing is working. I would just think I need
#main-header .dropdown.menu > li > a:active {
border-top: 2px solid #FFF;
transition: none;
}
Tried a:focus too but no luck.
try
#primary-menu> li.menu__active a {
border-top: 2px solid #FFF;
transition: none;
}
a:active is the state of the link after being clicked until the new page is loaded, which is usually a very short time, often even invisible. If you click and hold on a link in your page, you see the applied border-top appearing
If however by "active link" you mean the link of the page which you are currently on, that's not a:active, but the .menu__active class which is added via JS by the website to the li parent of the menu link (not automatically - there has to be a script that does that, which a lot of frameworks and themes/templates have included).
So in this case, just use .menu__active class as the selector for the CSS rule of the li element of that link. But you probably might have to make the selector more specific to overrule other rules, like #main-header .dropdown.menu > li.menu__active > a.
I cant for the life of me figure out how to style the bootstrap dropdown menus using CSS.
I can manage to get the background color to change but that's it. The links don't have an underline and the Hover background colour does not change. I haven't even started with the down arrows yet either!! Any advice?
Heres the code im trying:
#NAV .dropdown-menu { background-color:#273961; border-bottom: 5px solid #CCC;}
#NAV .dropdown-menu>li>a:link { background-color:#273961;}
#NAV .dropdown-menu>li>a:hover{ text-decoration: underline;}
Hopefully this helps.
ul.dropdown-menu {
border-bottom: 5px solid #CCC;
}
.dropdown-menu li:hover {
text-decoration: underline;
}
I was a little confused what you wanted to do with the background-color of the list items in your dropdown menu. Here's an example of one way to change the background color when hovering over each link. Using !important after a CSS attribute might help in some circumstances when you want to override any subsequent rules (but it might not be the BEST way to do this).
I recommend opening up your Chrome dev tools and playing around a bit until you get the desired results. I'm assuming you want to change the background-color of your list items when hovering to a different color than what you specified (#273961) since it is already that color to begin with?
.dropdown-menu li a:hover {
background-color: red !important;
}
smarter people than me!
I've been racking my brain for awhile with some css for this wordpress website On the navigation menu (Campus, National, World,...) I'm trying to do some custom css where when you hover your mouse over the menu items and they change color. Right now they only turn black except for the Campus menu item which changes to what I want for a moment then changes to black.
My attempt was to try this short css in the stylesheet, but it didn't work. I suspect I might have to adjust the upper-nested classes.
.menu-item-28 a:hover{
background:#1f61c4;
}
This is probably an easy question but my css-fu is pretty bad. Any help help is much appreciated!
Try changing your selector to
#menu-main-navigation li a:hover{
background-color:#1f61c4;
}
This will target any anchor (a) inside your main navigation (instead of only the one found under .menu-item-28 - ie. campus)
There is this CSS rule in the code
#nav nav > ul > li > a:hover {
background: #222222;
border-color: #222222;
color: #fff;
}
which causes the black background on hover. You probably can't change that, I suppose. But if you put another rule somewhere "later" (= below it) in the code, you can overwrite it with your own background color:
#nav nav > ul > li > a:hover {
background: #1f61c4;
}
Hi my website is http://eeeonlinecourse.com/
I would like to style my menu bar using border-bottom property as follows:
header#top nav ul li a:hover{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
header#top nav ul li a:active{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I have added these two lines into my child theme's stylesheet. However it does not seem to be working. Right now only the hover property is working fine. I have added an active selector after my hover selector but it is still not showing the bottom-border when the menu link is active. What should I add into my stylesheet?
Is it right?.Let's say when user click "Home", the bottom border will appear (under "Home" link).If so, just adds the css (your css) as shown in attached image. (.current_page_item) is the class added for CURRENT (selected) li. If home selected, then border-bottom will appear.
header#top nav .sf-menu li.current_page_item > a,
header#top nav .sf-menu li.current-menu-item > a,
header#top nav .sf-menu li.current_page_item > a
{
border-style: solid;
border-bottom: thick solid #27CCC0;
}
If you want to see the live demo whether it works just like what you want, you can go to "inspect element" and click on 1(in my attached image).Then, add the css to 2(in my attached image).
And, Good Luck..Sorry if this is not the answer.
Looking at your given code and reference site it seems that you have issue with active link only right?
If so than you can simply remove a.active because there is no active class applied to link.
Instead use
header#top nav ul li.current_page_item > a {
border-style: solid;
border-bottom: thick solid #27CCC0;
}
I hope this will solve your problem.
Try giving: current-menu-item is the active menu link.
li.current-menu-item a:active{ border-style: solid;
border-bottom: thick solid #27CCC0; }
Hope this helps.
I am making a tabbed navigation menu via jQuery in my website. All the individual tabs have the class navBarLink and here's the CSS pertaining to it:
.navBarLink:link,.navBarLink:visited
{
display:block;
height:27px;
width:120px;
color:#FFF;
background-color:#06C;
text-align:center;
padding:4px;
text-decoration:none;
border:0;
margin:2px 2px 0 2px;
}
.navBarLink:hover,.navBarLink:active
{
background-color:#FFF;
color:#06C;
border-bottom-style:solid;
border-bottom-color:#FFFFFF;
border-bottom-width:1px;
}
The problem is that the background color changes when I click on a tab but doesn't change when I hover on a tab. Basically my hover and my click don't work simultaneously. Any idea why this is happening?
http://jsfiddle.net/UnFhQ/
This works. (I removed the :link from the first css code, just so I could see the div's background color...) But click this and let us know what about the code doesn't work.
Thanks