none
Navigation CSS RRS feed

  • Question

  • I know this is a SharePoint 2013 dev section, but I couldn't find SharePoint Online as an option. I am looking to customize the colors, font, and size of the quick and global navigation independently. I came really close with attaching a custom style sheet. I have found multiple styles but I can't find the one that does only the top navigation. Anyone know that the style for link, selected link, and hover link at the top navigation only?

    I like the custom CSS because I don't have to touch the MasterPage.

    Thursday, March 23, 2017 6:51 PM

Answers

  • Hi,

    When working with CSS, there are several ways to “select” an element in the page. To “select” “some elements” which meets same condition such as all inside the top navigation bar, we might need to do some work on the selector we use.

    For example, if I want to change the background color of the hyperlinks in the top navigation bar, according to the structure of the corresponding HTML source code, I add a custom CSS style like this:

    #zz13_RootAspMenu a
    {
      background-color: red !important;
    }

    The outcome is as expected:

    Best regards,

    Patrick Liang


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

    • Marked as answer by send2mark Friday, March 24, 2017 11:30 AM
    Friday, March 24, 2017 6:57 AM
    Moderator

All replies

  • Hi,

    When working with CSS, there are several ways to “select” an element in the page. To “select” “some elements” which meets same condition such as all inside the top navigation bar, we might need to do some work on the selector we use.

    For example, if I want to change the background color of the hyperlinks in the top navigation bar, according to the structure of the corresponding HTML source code, I add a custom CSS style like this:

    #zz13_RootAspMenu a
    {
      background-color: red !important;
    }

    The outcome is as expected:

    Best regards,

    Patrick Liang


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

    • Marked as answer by send2mark Friday, March 24, 2017 11:30 AM
    Friday, March 24, 2017 6:57 AM
    Moderator
  • Hi Patrick thanks for the response.  I do not get the same results as you did in SharePoint Online using that style. That style seems to only affect the quick launch area.

    Although you put me into the right direction. I found zz11_RootAspMenu within the Dev tools which seems to work. I skipped that because it said "id=" instead of "Class=".

    Thanks for the help!!!

    Friday, March 24, 2017 11:29 AM