I was working on this site MY Site . the menu bar shows a black color on hover .I need different colors to show on each menu item hover.I have tried the following code in my css but didn't work
nav.main_menu>ul>li:hover>a span:nth-of-type(1){background-color:#161f30 !important;} nav.main_menu>ul>li:hover>a span:nth-of-type(2){background-color:#161f30 !important;}
also i tried
nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}nav.main_menu>ul>li :nth-of-type(1):hover >a span{background-color:#161f30;}
this also didn't work.can anyone please help me to achieve this? Please!! Thanks!!
Try this css
nav.main_menu > ul > li:nth-child(1):hover {
background:#ff0000 !important;
}
nav.main_menu > ul > li:nth-child(2):hover {
background:#ff00ff !important;
}
nav.main_menu > ul > li:nth-child(3):hover {
background:#ff0ff0 !important;
}
nav.main_menu > ul > li:nth-child(4):hover {
background:#ff0aa0 !important;
}
nav.main_menu > ul > li:nth-child(5):hover {
background:#ff0eee !important;
}
nav.main_menu > ul > li:nth-child(6):hover {
background:#ff0dd0 !important;
}
Try the following
.main_menu > ul > li:nth-child(1):hover > a span {
// styles
}
Better is to add classes to your nav elements.
.main_menu-home { // styles }
.main_menu-artists { // styles }
and so on
Related
I use Rmdformats with the Readthedown theme to generate a HTML file. I would like to change the link color (switching from red to blue). For that, I've seen i need to use a CSS file that overwrites default parameters. I did try many things but it does not work (however other changes in the CSS like the title color work).
Here is a MVE of the RMD file:
---
output: rmdformats::"readthedown"
css: myCSS.css
---
Done with [RMarkdown](https://rmarkdown.rstudio.com/) and [Rmdformats](https://www.rdocumentation.org/packages/rmdformats/versions/1.0.2)
Based on another post in a forum, here is the myCSS.css file (I only reported changes with respect to links)
#main .nav-pills > li.active > a,
#main .nav-pills > li.active > a:hover,
#main .nav-pills > li.active > a:link,
#main .nav-pills > li.active > a:visited,
#main .nav-pills > li.active > a:focus {
background-color: #0000FF
}
Link color does not change.
I also did try
a:hover{
color: #0000FF
}
a:link{
color: #0000FF
}
a:visited{
color: #0000FF
}
a:focus{
color: #0000FF
}
However, it does not change color either. :(
Could someone help me?
Many thanks !
Eric
Why didn't you try
a {
color: #0000FF
}
I added "#main" before every intructions and it seems to work (except for the "mouse over" attribute that is not overwritten,... I do not know why...)
Here is the code in case some encounters the same issue.
#main a:link {
color: #5A7B9C;
}
/* visited link */
#main a:visited {
color: #095484;
}
/* mouse over link */
#main a:hover {
color: #8ebf42;
}
/* selected link */
#main a:active {
color: #716464;
}
Operating System: Windows
DocFX Version Used: 2.56.1.0
Template used: default
I was finding a way to change the default icon that shows up by the side of the toc items which is a "+" sign and which becomes a "-" sign once the list item is being expanded. I want it to be a right arrow which rotates into a down arrow while expanding the toc. I tried to modify the docfx.css file where this thing is mentioned like this (using glyphicon-menu-right):
.toc .nav > li.active > .expand-stub::before,
.toc .nav > li.in > .expand-stub::before,
.toc .nav > li.in.active > .expand-stub::before,
.toc .nav > li.filtered > .expand-stub::before {
content: "\e258";
transition: transform .1s ease-in-out;
transform: rotate(0deg);
}
.toc .nav > li > .expand-stub::before,
.toc .nav > li.active > .expand-stub::before {
content: "\e258";
}
But the icons dont show up in the docfx site. What should I do regarding the same?
I was able to change them successfully using lines 512-522 in default/styles/docfx.css:
.toc .nav > li.active > .expand-stub::before,
.toc .nav > li.in > .expand-stub::before,
.toc .nav > li.in.active > .expand-stub::before,
.toc .nav > li.filtered > .expand-stub::before {
content: "x";
}
.toc .nav > li > .expand-stub::before,
.toc .nav > li.active > .expand-stub::before {
content: "y";
}
In theory, you should be able to paste this code (with your adjustments) in default/styles/main.css, and it will override the default CSS in default/styles/docfx.css.
This did not work for me until I put main.css in a custom template, but that could be my particular configuration, or my lack of understanding:
From directory root, add: template/styles/main.css
In docfx.json, add template:
"template": [
"default",
"template"
],
Also, make sure any fonts are referenced in the head partial (which may also need to be added to template/partials/head.tmpl.partial).
I'm trying to learn SASS and I would like to style the first level of my multi level menu using sass. Let's say this is the markup:
ul.menu
li.menu-item
ul.sub-menu
li.menu-item
In CSS, I can target the first level with
ul.menu > menu-item
But I can't make ">" work on SASS. Is there another way to do this?
Edit:
Forgot to add that I'm using the & so Im trying it with this markup:
.menu{
> &-item{
color: red;
}
}
To generate this css
.menu > .menu-item {
color: red;
}
your sass should look like
.menu {
& > &-item {
color: red;
}
}
I have one strange issue with my website. I work on this site
and want to change main menu hover links from white to orange. This is the CSS from that part:
.darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link
{
color: #fff !important;
I wanted to change that hover to white, and tried to override white with orange color. I inserted the following CSS:
.darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link
{
color: #f06623 !important;
But after reloading the page, hovers on links are still white. I am wondering why the white color is not being overwritten by the orange color. I know that last CSS with !important rule is last one, and overrides all before placed. I tried to find that CSS line in theme CSS files, but can't find it nowhere. Someone to help me how to change that hover to orange?
You can replace nav with your parent element or class or id
nav .darkheader .navigation > ul > li.menu-item:hover > a.menu-link,
nav .darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link
{
color: #f06623 !important;
}
CSS is executed procedurally. To override an !important css-rule, simply define another css-rule further down in the CSS-file with the !important flag.
// First we set the color to blue
.div1 {
background-color: blue !important;
}
// The background color is changed to green
.div1 {
background-color: green !important;
}
// The backgorund color is NOT changed to red, due to the !important flag above.
.div1 {
background-color: red;
}
If you have access to html, add a ID, it will increase the specificity.
But with you don't have acces to html, try override the specificity by this snippet:
.darkheader .navigation > ul > li.menu-item:hover > a.menu-link..menu-link,
.darkheader .navigation > ul > li.menu-item.menu-item-has-children:hover > a.menu-link.menu-link
{
color: #f06623 !important;
Here is the fiddle:
http://jsfiddle.net/rRKU3/25/
Here is the essence of the layout:
<ul>
<li>
<div class="rel">
<div class="abs">1</div>
</div>
</li>
<li>
<div class="rel">
<div class="abs">2</div>
</div>
</li>
...etc
</ul>
The divs help place text in relative and absolute containers for type positioning and transitions.
This Nav Bav currently looks like the following:
1 / 2 / 3 / 4 / 5 /
I would like it to drop the last "/" separator character to look like the following:
1 / 2 / 3 / 4 / 5
When I create a Nav Bar, that is made of only ul and li items, using the "li:last-child:after" selector works correctly and eliminates the last separator. When I create it using the above technique, with 2 div containers inside the li, I cannot figure out the selector I need, to overwrite the :after selector that creates the separator in the first place.
Here is what I have tried:
Selector that creates the separator;
ul > li > .rel > .abs:after {
position: absolute;
bottom: 0;
left: 55px;
content: "/";
font-size: 12px;
color: black;
}
Selector to overwrite the above selector (I tried all of versions below and none work):
/* .rel > .abs ~ .rel > .abs { */
/* li > .rel > .abs ~ li > .rel > .abs { */
/* ul > li > .rel > .abs ~ ul > li > .rel > .abs { */
/* .rel .abs:last-child { */
/* .rel > .abs:last-child { */
/* li > .rel > .abs:last-child { */
ul > li > .rel > .abs:last-child {
position: absolute;
bottom: 0;
/*left: 55px; */
content: "+";
font-size: 12px;
color: black;
}
Instead of overwriting the separator, this last selector somehow eliminates the hover (not mentioned, but you can see it in the jsfiddle). These last several lines are commented out in the jsfiddle so you can see the effect I am going for on hover.
Thank you for your esteemed knowledge of CSS selectors!
Add the following class in your CSS. It will remove the "/" from last child.
ul > li:last-child > .rel > .abs:after {
content: " ";
}
DEMO