Quick Launch Code Changing Top Navigation
-
19-12-2020 - |
Question
I have some code to change my quick launch. but it is also changing the navigation across the top of the page. The code is to change the width of the quick launch but its put spaces in between titles on the top navigation.
<style>
#DeltaPlaceHolderLeftNavBar
.menu li.hover
{
background:Red;
}
.menu-item
{
background-color:white;
width:200px;
}
</style>
Can someone help me figure out for the code not to change the top navigation? Thanks for any help.
Solution
It all comes down to learning CSS Specificity
#DeltaPlaceHolderLeftNavBar .menu li.hover {
background:Red;
}
Targets: all LI
with a hover
class in a (parent) element with class .menu
in (a parent) element with id #DeltaPlaceHolderLeftNavBar
.menu-item {
background-color:white;
width:200px;
}
Targets: all items in the page with class menu-item
.
So you have to be more specific (that is why it is called CSS Specificity)
to only target elements with class menu-item
in the #DeltaPlaceHolderLeftNavBar
with
#DeltaPlaceHolderLeftNavBar .menu-item {
background-color:white;
width:200px;
}
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
OTHER TIPS
Could you try this :
<style>
DIV #s4-leftpanel {
BACKGROUND-COLOR: yellow; MARGIN: 4px
}
DIV #s4-leftpanel-content {
BACKGROUND-COLOR: blue; MARGIN: 4px
}
.ms-quicklaunchouter {
BACKGROUND-COLOR: red; MARGIN: 4px
}
.ms-quickLaunch {
BACKGROUND-COLOR: pink; MARGIN: 4px
}
.s4-ql {
BACKGROUND-COLOR: grey; MARGIN: 4px
}
.s4-ql .menu {
BACKGROUND-COLOR: green; MARGIN: 4px
}
.menu-vertical UL.root {
BACKGROUND-COLOR: black; MARGIN: 4px
}</style>
Take a look the following links: Click here And Here