Just got done creating a master page from a customized design and I'm trying to find a way to strip off SharePoint's own CSS from the navigation links and use mine, but to no avail.

I'd also like to strip off the spans that wraps the links and leave just the li

Any ideas on how I can achieve this?

  • the Quick Launch Navigation or the Global? – Michael Colbs Feb 20 '15 at 16:01
  • @Colbs it say Top Navigation. I'm pretty new to sharepoint. – Dz1 Feb 20 '15 at 16:03

I don't know about stripping off the spans, but you can override the default styles by using an Alternate CSS file. You create a CSS file that targets the elements you want to style, so for targeting navigation elements you might use selectors like

#DeltaTopNavigation a.ms-navedit-linkNode {
    /* for links in the top nav bar */

#sideNavBox .root li {
    /* for li's in the quicklaunch */

for example. There are many classes and elements you can use to select exactly what you want to style. Then you define your overriding styles and upload the style sheet to somewhere in the site, like Site Assets or the Style Library. Then go to Site Settings, and under the "Look and Feel" section, click on the Master Page link, and you should see a section where you can specify the URL to the Alternate CSS file. You can find a lot of articles out there on the web detailing how to do this, and here's one.

Alternatively, if you are not using the Publishing features and the Master Page link in site settings is not available to you, since you are defining your own custom master page, you can just link to the custom CSS file from within the master page.

| improve this answer | |

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.