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;
}
Related
I was trying to build a menu for a website, and I used this code:
nav#menu:hover li{
background-color: #606060;
}
However, when I hover over the list items on the site, the code changes the background color of every single one of them, not just the one I have my cursor on, does anybody know what I should do?
This should fix it
nav#menu li:hover { background-color: #606060; }
You had hover on entire menu and not its individual li tags.
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;
}
The Inspinia AngularJS framework has a demo here for those who don't use it.
For the life of me, I cannot see how to change the background colour of the navigation menu on the left. It should be simple, but I just can't find it, even using the Chrome developer console.
[Update] I want to change the color programmatically from AngularJS, what's the best way to do that? Maybe add an Id to the background div?
Make some changes, according to the images below:
I hope to have helped in some way
i guess this will help u
body{
background-color: #F44336;
}
.nav-header{
background-color: #F44336;
background-image: none;
}
.nav > li.active{
background: #c7635b;
}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus{
background-color: red;
}
.nav-header and other elements in your sidebar use background-image and those images are opaque, not showing the background color. You need to check (and reset) background-image property of items in your sidebar for this.
Example:
.nav-header {
background-image: unset;
}
#side-menu {
background-color: #933;
}
.nav > li.active {
background-color: #833;
}
Keep inspecting your elements until you find what rule sets the backgorund-image, background-color or background (shorthand) for the element, copy the selector of the currently applying rule and place it in your own stylesheet, changing the value of the property. Make sure you load it after the rest of your stylesheets.
There is no background-color defined in sidebar, its the background-color of body, and the middle content section has light grey bg color, so change the body-color and sidebar color will be changed.
I have this code, please observe this fiddle:
http://jsfiddle.net/VjhJ4/19/
When you hover over the words, the text color changes to white - which is how I want it. However, when hovering over the 20px border-bottom, the text color does not change to white. Just hover your mouse over the border-bottom and check.
How do I make so that the text color changes to white when you hover the bottom as well? I currently have hover settings on ul#secondary-menu a:hover { color: #FFFFFF;}
Just add (or amend your existing CSS to include) the following:
#second-menu ul.nav li:hover a {
color: #fff;
}
JS Fiddle demo.
Can you explain why it was not changing the hover previously and how this helped. As I mentioned, my coding knowledge is limited so I am trying to learn what the issue was here
It wasn't changing the hover effects previously because you'd, presumably (and I am presuming, I gave up reading your CSS less than half-way through), specified a :hover rule for the a element that was a child of the li element, but the border is attached to the li, not the a. So hovering over the li's border had no effect.
This rule simply specifies that the colour of the a element within the li should be white (#fff) in response to the mouse hovering over the li element. In practice, placing this rule at the end of the stylesheet caused it to override any other conflicting rules that might have been declared elsewhere (and, once again, I gave up reading the stylesheet due to its length).
I'd recommend finding whatever rule you have that defines the a:hover effects, and add the two rules together, for example:
#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
color: #fff;
}
The specificity may not need to be quite so high, so you might be able to reduce the selector, to something shorter like:
ul.nav li a:hover,
ul.nav li:hover a {
color: #fff;
}
Oh, and it's worth noting that you have quite a mix of in-line (style="...") and external styles (using a stylesheet); try and use only the external form, for clarity and for ease of updating, editing and maintaining.
If you want the border to be a part of the hyperlink (that is, the user can click on the hyperlink when the mouse is over the border), then you'll need to remove the border from the li and add it to the hyperlink instead. If necessary, add display:inline-block to the hyperlink.
If the border doesn't need to be a part of the hyperlink, then #David Thomas's suggestion should be all you need.
Modified demo
Search for the string
ul#secondary-menu a:hover { color: #FFFFFF;}
in your css style and replace it with
ul#secondary-menu li:hover a{ color: #FFFFFF;}
I'm trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)
As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what I understand, that means it's been overidden, but I don't know what by...
If anyone has a similar code feature in their browser, I would really appreciate it if you could check it out. I made the menu all by myself, so I'd like to think I can code, but I just can't understand what's overiding the font colour.. I think it's line 73 of the new_menu_style.css file.
You should try adding this to the CSS:
.menu ul li:hover ul li a {
color: #ccc;
}
.menu ul li:hover ul li a:hover {
color: black;
}
The .menu ul li:hover a gets a higher weight than the other one, overriding it.
First: Do something about your code style. proper indentation makes a great effort to increase readability:
So here is a solution: add this to your css as these override the .menu ul li:hover a
.menu ul li:hover ul a {
color:#ccc
}
.menu ul li:hover ul li:hover a {
color:#000
}