my hover only works on first page when page is activated. Only home page change color when I click on it, but other pages dont change color, can you help me? here is code
#meni li a:hover {
color: #000;
}
#meni li.active a {
color: #000;
}
I saw last question about this and I have HTML DOCTYPE on all pages, thanks :)
Related
I already got an underline hover when you go over it.
but now I try to find out how I can make an underline, for example I go to my ''about'' page
so I want an underline under about, so they know I am on that page and when I go to another page like home you will see there is an underline.
sorry for my bad English, hope you guys understand me
html code
You can use below code to make underline for active pages,
.activepage a:active{
text-decoration:underline;
text-decoration-color: blue;
border: none;
display: block;
position: relative;
opacity: 0.8;
color: #1a1a1a;
}
Here I have taken class named activepage and a is link within it.
so whenever user will be on activepage underline will be shown.
Thanks..
as you can see on this jsfiddle, I'd like my active menu item to have a black rounded background (by "rounded" I mean similar to how it looks like with the hover effect).
For that purpose I have this piece of code
navbar-classic li a.active,
.navbar-classic li a:hover {
color: #fff;
background: black;
}
The issue is that even when I'm on index.html, my first menu item ("Index") still has a transparent background. Seems that li a.active is not taken into consideration.
What is the issue?
Many thanks,
It's because .active class is missing.
See this fiddle
Home
I have a link (styled as a button):
go to external site
And I have a hover on this button class, like:
.button {
background-color: green;
}
.button:hover {
background-color: red;
}
So far, no problem. I hover the button, it turns red. I click it and a new page opens in a new tab. When I go back to my website the hover is gone and the button is green again. BUT that only works in some browsers!
In chrome (my version 47.0.2526.80) my button hovers red, I click on the external page and when I go back to my site the button still shows the hovered red color. Only if I move my cursor the hover deactivates. Like somehow the hover is sticky.
Has anyone experienced this issue? Is this a browser bug? Any ideas for a workaround?
Use focus, it did the trick for me :)
Here is a codepen
http://codepen.io/anon/pen/YwEvod
.button:focus {
background-color: green;
}
a:visited, a:focus {
color: green;
}
try that - if not it may just be chrome
My site currently has got red color for highlighting the menu on mouse over and black color by default. Please see my website here. Is it possible to change this color so that it can be matched with the logo. i.e light blue on mouse over and dark green as default. Can it be done using custom css code? (I have used the theme Awaken)
Thanks!
Yes you can change it with this css.
.main-navigation {
background: #ADD8E6;
color: #000;
}
.main-navigation a:hover {
background: darkgreen;
}
And for current tab use this selector
.main-navigation li.current-menu-item {
background: pink;
}
So I'm just trying to create a small website. (Don't worry that's not going
to be the title)
Right now the "Home" "News" "Gallery" and "About us" are not actual buttons that direct to another page. When I do
Home
The button turns into color purple and it is underlined. (I know this is how links are shown) But is there a way that I can make these buttons stay color orange like in the picture without them turning blue and underlined. Thanks
http://imgur.com/Czsk4
You can set the styles inline, but the best way to do it is through a css class.
To do it inline:
Home
To do it through a class:
Home
a.nav-link:link
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:visited
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:hover
{
color: #fb3f00;
text-decoration: none;
}
a.nav-link:active
{
color: #fb3f00;
text-decoration: none;
}
To do it through a class, you need to put the css code in a separate css file and link it in or you can put it in the head of the document. The best practice is to put it in an external css file so it can be used throughout.
If you want the orange to be on every link throughout, just remove the ".nav-link" part of the classes and remove the class="nav-link" from the link tag. This will make all links orange unless you have defined a another class and explicitly applied it to a link tag.
Good Luck!
Using CSS instead of inline styles will work much better:
a {
color:orange;
text-decoration:none;
}
You can also get fancier and have the underline appear when you hover:
a:hover, a:focus {
text-decoration:underline;
}
This can help improve user experience (UX), though if the links are in the header it may be naturally apparent that they are links. (UX design is more complex than this of course, because you have to consider things like touchscreen users that have no "hover". :) )
All links come with different states so if you want them to stay with just one color you can modify all the states together like so:
a:link, a:visited, a:hover, a:active { color: orange }
You can do that by using CSS.
to set this in your code right at the end of the head-section
<style TYPE="text/css">
a:link, a:visited, a:hover, a:active { color: #ff8080;
text-decoration: none;
}
</style>
and change the #ff8080 in your color
I have the perfect solution for you!
I'm copying and pasting straight from my code. make it relevant to you. This definitely works for what you are trying to achieve.
<style type="text/css" media="screen">
a:link { color:#ffffff; text-decoration: none; }
a:visited { color:#33348e; text-decoration: none; }
a:hover { color:#91ac48; text-decoration: none; }
a:active { color:#7476b4; text-decoration: underline; }
</style> Order Now