I'm new to branding SharePoint and I've been asked to overhaul the look of the global navigation bar in SP 2013. I've read that I can change a lot of elements such as ms-breadcrumb-top and menu-item-text

However, in the dev toolbar, I'm finding that it would be useful to change some of these elements that appear to be specially named.


It looks to me as if they're dynamically generated depending on what I have on the page. Which leads me to believe I should leave them alone.

Is it ok to apply CSS styles to these or will they change? What's the general rule of thumb?

I know there's more.. but these are examples.

2 Answers 2


The ID will remain the same on your single SharePoint-Environment, but it can be different on other site collections.

The name and the zz are always the same, but the number will change, so you have to build your css with wildcards, e.g.:

div[id^=zz][id$=_TopNavigationMenu] {
  display: none;

You can use these IDs as it is. That will remain same every time. You can use jquery like:


or you can also use wildcard for these Ids.

You can also show hide on the basis ofcss class name. Also check:

How To Hide The Last Top Nav Tab in SharePoint 2010



  • If I want to keep it in css, and hide that particular element, I could also do #s4-workspace{display:none;}, right? So you are saying that I CAN apply styles to the elements that I mentioned in my post? What do you mean "use wildcard for these ids"?
    – spex5
    Sep 12, 2014 at 15:44
  • Yes you can keep it in css. By wildcard i meant in jquery you can select the element using wildcard like $('div[id^="list_"]')
    – Aanchal
    Sep 12, 2014 at 15:47
  • Can you please explain what those elements in my original post are, what they mean, and what they do? (zz, ct..)
    – spex5
    Sep 12, 2014 at 15:50
  • I just noticed that in some cases one of the elements is zz13_TopNavigationMenu chrisstahl.files.wordpress.com/2013/11/htmlnav.png However, on my site, it's zz12_TopNavigationMenu.. Can anyone explain this or tell me where it is explained?
    – spex5
    Sep 12, 2014 at 17:17
  • @Aanchal Selecting with wildcards is not a jquery feature. It's a normal css selector, which can be used in CSS-Files and in vanilla JavasScript with document.querySelectorAll(). See youmightnotneedjquery.com :-) Sep 15, 2014 at 7:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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