none
CSS to style UL on page also styles Top Navigation RRS feed

  • Question

  • Hello - 

    The custom CSS I'm using to style headers and fonts on a Sharepoint webpart page works fine, but the CSS to style an unordered list on the page is also styling the SharePoint site's top navigation.  

    Here is the code:  

    ul li{
    font-family: Arial;
    font-size: 14pt; 
    line-height: 2em;
    }

    It's pretty vanilla code, but why is also styling top navigation in the "zz9_TopNavigationMenu" div?  How do I not style that? 

    I've added the CSS to the Site Assets library, also to a CSS Assets library I created, then I added the CSS to a Script Editor webpart on a page.  All results are the same: the SharePoint top navigation is styled as well as the list on the page.

    I don't know what to do at this point.

    Any guidance is appreciated!


    Cheryl  


    Thursday, November 14, 2019 8:03 PM

Answers

  • Hi,

    The example show you how CSS can specify the specific element(s). Your CSS code will change the <li> under <ul> on the entire page into the defined style. So you need to find out the different attribute between the <ul><li> you want to change the style and  the other <ul><li> in the same page, then apply the attribute in the CSS code to select the <ul><li> you want.  Just like 'ul li.ms-cui-group' only selects the top navigation bar, 'ul li.static' only selects the left navigation bar.

    Test demo:

    CSS code:

    <style>
    ul li.test{
    font-family: Arial;
    font-size: 14pt; 
    line-height: 2em;
    }
    </style>

    The CSS code will not affect other <ul><li>tags on the page.

    Best Regards,

    Lee


    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.

    • Proposed as answer by Dennis GuoModerator Tuesday, November 19, 2019 8:13 AM
    • Unproposed as answer by Cheriba Tuesday, November 19, 2019 2:00 PM
    • Marked as answer by Cheriba Tuesday, November 19, 2019 2:01 PM
    Monday, November 18, 2019 3:32 AM

All replies

  • Hi,

    According to your code, css will be applied to all <li> tags under <ul> on the page.

    If you want to apply to specific navigation nodes, you need to find out their differences, taking the top navigation and left navigation as examples(developer tool by F12).

    top navigation

    left navigation

    If you want to apply to top navigation bar, you can use

    ul li.ms-cui-group{
    font-family: Arial;
    font-size: 14pt; 
    line-height: 2em;
    }
    

    If you want to apply to left navigation bar, you can use

    ul li.static{
    font-family: Arial;
    font-size: 14pt; 
    line-height: 2em;
    }
    

    Best Regards,

    Lee


    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.

    Friday, November 15, 2019 2:22 AM
  • Thank you for your response.

    Unfortunately the problem I want to fix is that don't want to change anything in the top navigation or the left navigation. I only want to style the UL tags within the page content, but when I do, it also styles the top navigation.

    But your response has given me food for thought - 
    My thought was to create css that will style the top navigation back to the way it was, after I have styled the page content.  So far I have not been successful.


    Can you think of another way I can style page content without styling the top navigation?

    Thank you, 

    Cheryl 

    Friday, November 15, 2019 8:17 PM
  • Hi,

    The example show you how CSS can specify the specific element(s). Your CSS code will change the <li> under <ul> on the entire page into the defined style. So you need to find out the different attribute between the <ul><li> you want to change the style and  the other <ul><li> in the same page, then apply the attribute in the CSS code to select the <ul><li> you want.  Just like 'ul li.ms-cui-group' only selects the top navigation bar, 'ul li.static' only selects the left navigation bar.

    Test demo:

    CSS code:

    <style>
    ul li.test{
    font-family: Arial;
    font-size: 14pt; 
    line-height: 2em;
    }
    </style>

    The CSS code will not affect other <ul><li>tags on the page.

    Best Regards,

    Lee


    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.

    • Proposed as answer by Dennis GuoModerator Tuesday, November 19, 2019 8:13 AM
    • Unproposed as answer by Cheriba Tuesday, November 19, 2019 2:00 PM
    • Marked as answer by Cheriba Tuesday, November 19, 2019 2:01 PM
    Monday, November 18, 2019 3:32 AM
  • Hi,

    Thanks for marking the replies as answer. I’m pleased to know that the information is helpful to you. I hope you are delighted with the service we provided you.

    Here I will provide a brief summary of this post for your information. 

    Requirement

    ====================

    Custom CSS on li elements of page content don’t affect other page navigation li nodes

     

    Solution

    ====================

    Use CSS attribute selector to limit to page content li elements only.

    Best Regards,

    Lee


    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.

    Wednesday, November 20, 2019 3:34 AM