0

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.

1

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/

0

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

  • Thank you @Mathew. The links you have do not work. Do I add this code along with my code? I still need for the quick launch menu to increase in width but I do not want the top navigation to change at all. – SharePoint Lady May 3 '17 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.