locked
CSS Navigation Links RRS feed

  • Question

  • I have added CSS styling for my left navigation links but I would like to style a few links differently. Is that possible?

    Qwerty

    Wednesday, March 20, 2019 12:53 PM

Answers

  • Hi,

    You can use scripts to style specific link on the left navigation.

    Here is a demo:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function() {
    
                    //$(".ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item:contains('<link>')").css('background-color', 'red');
    
                    $(".ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item:contains('Home')").css('background-color', 'red');
    
    });
    
    </script>


    Best Regards,

    Linda


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, March 21, 2019 3:09 AM

All replies

  • Hi Monica,

    The below CSS code may help you to modify the Left Navigation

    <style type="text/css">
    #sideNavBox{
    width:180px;
    }
    
    
    .ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item
    {
    border-radius: 10px;
    background-color: #3498DB;
    Border: 2px solid white;
    color: white;
    height: 38px;
    }
    
    .ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item{
    padding-left:14px;
    }
    .ms-core-listMenu-verticalBox li.static > ul.static > li.static > .ms-core-listMenu-item:hover{
    border-radius: 10px;
    background-color: #85929E;
    Border: 2px solid white;
    color: white;
    height: 38px;
    Overflow:hidden;
    }
    </style>
    and the result would be like below image.

    _______________________ 

    Thivagar SEGAR
    [If this Post helps you, then please don't forget to mark it answer or Vote for this post]

    Wednesday, March 20, 2019 1:08 PM
  • Hi,

    You can use scripts to style specific link on the left navigation.

    Here is a demo:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function() {
    
                    //$(".ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item:contains('<link>')").css('background-color', 'red');
    
                    $(".ms-core-listMenu-verticalBox li.static > .ms-core-listMenu-item:contains('Home')").css('background-color', 'red');
    
    });
    
    </script>


    Best Regards,

    Linda


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, March 21, 2019 3:09 AM