Style all anchors/links:
.navbar li a {
color: blue !important;
}
Style anchors/links under ul:
.navbar ul li a {
color: blue !important;
}
I would like to achieve 2 different scenarios:
Style all links, except those under ul
Style all links, except those under class .dropdown-menu (ul)
JsFiddle
Do you mean all nested links should not be colored blue? if so change the css as below.
.navbar li a {
color: blue !important;
}
/* Link under ul only */
.navbar ul.dropdown-menu li a {
color:initial !important;
}
Use this selector to style only the first ul. and the under color is different
.navbar-nav > li > a {
color: blue !important;
}
see this fiddle: https://jsfiddle.net/v2xmc150/2/
Related
I am trying to change the colour of my active pagination button from black to the light brown (#a88f4b), but it seems as though I can't get rid of the black. What is it I'm getting wrong here?
http://demo.boxofficeboxing.co.uk/?s=
.eltd-pagination a {
color: #666 !important;
}
.eltd-pagination li.active {
background-color: #a88f4b !important;
}
.eltd-pagination a:hover {
color: #fff !important;
background-color: #a88f4b !important;
This is your line that should modify:
.eltd-pagination ul li a:hover,
.eltd-pagination ul li.active span {
background-color: #a88f4b !important;
color: #fff !important;
}
In you pagination, active li has span in it instead a tag so you had to set style on the span not li like code above. copy/paste code above in your css in very last line.
I have this in my css based off of line25 navigation tutorial.
I added this addition to my css and would like that when a user hovers over a menu icon, it wipes away the :focus span (icon text description) and only displays :hover span text at the moment. How can that be achieved?
nav ul li a:focus span {
display: block;
}
nav ul li a:hover span {
display: block;
}
Currently the :hover text and :focus text jumble on each other.
Here is the codepen on the exact thing.
Couple of things you can do:
First Idea: Put the :hover on always on top with a solid background-color.
nav ul li a:hover span, nav ul li a:focus span {
display: block;
background: white;
width: 100%;
}
nav ul li a:hover span {
z-index: 1;
}
Or you could hide the focus one as soon as you hover over the list:
nav ul:hover li a:focus span {
display: none;
}
#navbar-lg ul li a:hover span, nav ul li a:focus span {
display: block;
}
I'm fiddling with a Wordpress navigation. I have a navigation where in hover state the background of each li item turns orange and the text is meant to turn white from black.
It appears though that there are 3 colors going on. With no hover the <a> is black, when the <li> item is hovered over the <a> tag text is grey and when you hover the very middle, the <a> tag, the color of the text is white.
There should be two colors for the anchor text: black for default and white when hovered. I need to stop the grey so that when the orange is activated, so too is the white text.
There are a few pieces of code from this Wordpress site that could be relevant. I'm guessing these ones below but cannot see where I would edit for this particular issue. If anyone can offer a pointer the website is here, I'm not even sure what I should be trying to select:
tinyurl.com/m562wgd
/* 2.2.1 Top Drop-down menu */
.dropdown ul,
.dropdown ul li,
.dropdown ul ul {
list-style: none;
margin: 0;
padding: 0;
}
and
.dropdown ul li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
.dropdown ul li.hover,
.dropdown ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
The grey is coming from the li changing opacity. You only see the white when you hover over the anchor tag because that is the Only place you have the hover set
Add
.dropdown ul li:hover a {
color: white;
}
That should do it
There is no gray, just an opacity change in the rule:
.dropdown ul li.hover, .dropdown ul li:hover, .dropdown ul li.on {
background-color: orange;
opacity: 0.4;
}
Which makes the black appear to be gray. You also want to add the following rule to make the link white when you hover over the list item:
.dropdown ul li:hover a {
color: white;
}
my problem is rather simply explained, but I just cannot find the answer using firebug etc....
Why are my submenu items overlapping? Hover over "Aktuelles" and you can see that the transparent submenu items overlap, creating ugly white bars. The ul li elements have no minus margins assigned to them, so why are they doing it?
Thanks!
It's because you are giving .main-navigation li a fixed height. Line 946 in style.css. Remove the height. Also the box-shadow on .main-navigation li ul li a might cause some ugly design. You'd better apply the shadow on .main-navigation li ul.
The line-height of a <a> is higher than it's parent <li>.
Set the line-height in the following classes to equal values:
.main-navigation li ul li a
.main-navigation li
You have this css class:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
Change it like this:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
opacity: 0.75;
}
#Bram Vanroy answer is the way to go...
Also try this code
.sub-menu li {
margin: 0;
}
Because .main-navigation li style affects all the li in that menu, so this margin: 0 2.857142857rem 0 0 is making the .sub-menu li to have an ugly margin-right
I have a menu:
<div class="headerMenu">
<ul>
<li>Home <span>Home Page<span></li>
<li>About <span>About My Website<span></li>
<li>Contact <span>Get in touch<span></a></li>
</ul>
</div>
My current CSS is as follow:
.headerMenu{
width: 100%;
}
.headerMenu ul{
margin: 0;
padding: 0;
float: left;
}
.headerMenu ul li{
display: inline;
}
.headerMenu ul li a{
float: left;
color: white;
padding-top:25px;
padding-left:50px;
font-size:24pt;
}
.headerMenu ul li a:visited{
color: white;
}
.headerMenu ul li a:hover, .menu ul li .current{
color: #fff;
background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}
And now for the question:
How can i get the content in the span tag to be below the Main text.
When i hover over the anchor, How do i add the hover image as shown in screen shot
The Mockup i created in Photoshop looks like this:
I know this would be easily achievable by making use of images, but my solution requires that menu to be created dynamically.
1) How can i get the content in the span tag to be below the Main text.
You need to use display: block on the span to have it appear on a new line:
.headerMenu ul li a span {
display: block;
}
2) When i hover over the anchor, How do i add the hover image as shown in screen shot
Try to center the arrow to the top. This might work:
.headerMenu ul li a:hover, .menu ul li .current {
color: #fff;
background: url(../../Content/Images/menu-selector.png) no-repeat center top;
display:block;
/* also make sure that you use display block with correct height
so that you can positionate the arrow on the correct place... */
}
Add the following code for problem 1:
.headerMenu ul li a span {
display: block;
}
This sets the <span> to display as a block level element, therefore occupying the full parent container width by default.
For problem 2, there are multiple ways to do this. However, my suggestion would be to add the array to the <li> and use the :hover pseudo class. Note: that this will only work in IE for 7+.
.menu ul li:hover{
background: url(../../Content/Images/menu-selector.png) repeat-x;
}
See it in action - http://jsfiddle.net/kxqx8/1/ (I changed the colors to help display)