Example page,
Accompanying CSS
Should be a fairly basic issue but for some reason I can't figure it out.
Basically I want the links in my navbar to have no underline or colour change and remain white.
Any idea where I'm going wrong?
It's because you're selecting the main .links element, but not the actual a elements inside. This should do the trick:
.links a {
text-decoration: none;
color: white;
}
Related
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
I've seen the other question about this here but their solution did no work for me. When the mouse hovers over a hyperlink, a pesky red line appears underneath it. I've tried:
a:hover{
text-decoration: none;
border-bottom: none;
}
a {outline : none;}
.entry-content a {
border-bottom: none;
}
on Appearances->Customize->Additional CSS
on Appearances->Editor->style.css
also on the Slider Revolution Custom CSS because initially I thought this was an issue with the text in the slider, but later realized it's from the whole theme.
also on style.css:
every instance of border-bottom was commented out and replaced by border-bottom:none;
every instance of a:hover that had border-anything had that border commented out
every instance of box-shadow was commented out and replaced by box-shadow: none;
The red line keeps showing up when I hover. I don't know what else to do. I also asked someone to clear their cache and cookies and then refresh the website. The underline/border/box is still there. Is there anything else that could be causing this?
Based on the Scrawl theme preview, looks like it's an ::after so you can override it with this:
.comment-content a:after, .entry-content a:after, .comment-respond a:after, .site-footer a:after {
display:none;
}
Do keep in mind that for accessibility reasons you should probably keep an underline of some sort, but this :after seems rather odd, not sure why they didn't just go with text-decoration:underline instead.
Hi guys i'm learning and progressing on CSS basics. I'm wondering how do you make the background of active menu bar set to orange? i tried
ul#mcolor li.active a {
color: rgb(25, 25, 25);
background-color: Black;
}
but it's not working. what do i need to add to my code to change the background color of avtive menu bar? Please point me to the right direction. Thanks in advance.
here's my code so far
http://jsfiddle.net/blackknights/jADWj/embedded/result/
Active page is currently Home
Take a look at Is there a CSS parent selector? thread and you will find out there is no way to call the parent of an a tag, in your example.
So you need to add the active class to your li tag, instead of a and then make your CSS like this one.
#mcolor li.active {
background: none repeat scroll 0 0 black !important;
}
I saw you used <font> tag with color. If you want to change the color property of your buttons with CSS, give the color to the a tag and avoid giving this to a <font>. Suggest you to take a look at W3Schools HTML tutorials.
You have to set the #active for the a element:
ul#mcolor li a.active {
background-color: orange;
color: Black;
}
In addition to that rgb(25, 25, 25) is a black color (and not a orange one).
See also http://www.colorcodehex.com/191919/.
There is way too much errors in example code. But for your current question:
ul#mcolor li.active a
you are using li.active but the active class are applied to a tag in your HTML.
Hope this will help...
Here is the fiddle which you looking for. http://jsfiddle.net/jADWj/4/embedded/result/
Just put active class to li. Thanks.
for days I have been attempting to apply a color to the selected page in the main menu on a new site I am making. So far it has been able to resist any attempt to change.
I am fairly sure that the the following css tags are responsible for this, however adding a "color" does not help in any way. Firebug tells me that it is using the generic color given to it by "a", however that the correct class "li.selected_subpage" is also applied.
#menu-wrap li.selected_page{
line-height:20px;
color: #F00; (ignored)
}
I am at wit's end, anybody have an idea? Thanks!
On a subnote, I would also like to apply a box shadow to the sub-menu, however what it does on this menu is apply it to ever item in the list, not just around all of the items. If anyone has an idea where to apply the box-shadow I would be greatful too. Thanks!
I think your color choice is overridden by this block in your style.css:
a:link {
color: #333333;
text-decoration: none;
}
change your code to:
#menu-wrap li.selected_page a:link {
line-height: 20px;
color: #F00;
}
and make sure you put it somewhere after the a:link block.
Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.
So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.
Try this:
<style type="text/css">
a img { text-decoration: none } // Images within
</style>
However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.
It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:
a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }
Try this:
a img { border:none; vertical-align:top; }
It moves the underline to the top and underneath the image.
Underlining is controlled by the text-decoration CSS property. So if you want to turn that off:
a { text-decoration: none; }
In jQuery, you could use the has selector to add a class to all links that have an image inside them:
$('a:has(img)').addClass('image-link');
Then remove the border from those links in your CSS:
a.image-link {
border-bottom-style: none;
}
It would only work when JavaScript’s enabled though.