Custom Navigation Menu Content Blocks with Twitter Bootstrap

This is Part 2 of my ServiceNow CMS + Twitter Bootstrap series.

Below are the code examples you will need as explained in the video:



Layout Includes:



  1. HI Nathan nice vedio..i an a starter with CMS. I am trying to figure out how to put a background image in t out of box ESS portal ..any thoughts?

    Thank you

    1. Putting a background image should be pretty straight forward. You can do this via CSS. First select the element that need the background (if the whole page you can use “body”), and in a style sheet do something like this: .element-class{ background-image: url(‘/url-to-image/image.jpg’); } This is not really a CMS specific question but really just HTML & CSS.

    1. Mathew, that’s because you need to follow the next step in the video which is to rename the “cms_menu_section_blocks” to “cms_menu_blocks”.

        1. With this method you could produce any markup you would like, but for this example you would need to include the Bootstrap styles

  2. Hey Nathan,

    Have you experiences any conflicts in the past with JS libraries and page edit mode?

    This has been a problem for me and so I put the following code around my JS includes in the layout to stop the conflicts happening:

    … Other JS includes …

    1. Joel,

      I did run into this at some point. I forget what i did but most of the time if jQuery is in noConflict mode and your plugins are created correctly, it shouldn’t interfere. I do see a lot of issues between prototype.js and jquery though, and depending on what issue it is there are all sorts of workarounds.

      Lately I’ve been playing with running everything with sysparm_direct=true but even that comes with it’s own issues.

  3. <j:if test="${GlideTransaction.get().getRequest().getRequestURL().toString().indexOf('') == -1}">
    <script src="//"></script>

    … Other JS includes …


  4. Im struggling to include scripts in Fuji version of ServiceNow.

    When i use the element inspector I cant see the latest jQuery Library loaded, and bootcamp logs a console error saying I need a later version of jQuery.

  5. Hello Nathan – Have you ever seen a multi-column mega-menu created for ServiceNow? Is this design pattern possible? I’m looking for a reference or some secret recipe for CMS. 😉

    1. It’s been done a few times, the old ServiceNow website used to live on CMS and had such a menu. I think using the technique covered in this video you could easily create one, however I don’t know of one available for download. The navigation content block schema would easily support it, so it would just be creating the UI Macro for rendering.

  6. Hi Nathan,

    I was following your tutorial but when I add the layout includes at the bottom of the layout, everything starts messing up. The style of the nav bar doesn’t look like yours and the drop down doesn’t even show up before the tabs start disappearing. Also, is the jQuery fix just a UI Script?


      1. Hi Nathan,

        Does this functionality not work on Fuji? I can’t seem to make it work. The menu still disappears on click. Any suggestions?

        William Henry

  7. Hi Nathan,

    Great work with this tutorials.

    One thing you mention in the video, you could include bootstrap in better ways then direct linking in Layout. You mention you should elaborate on this in later videos but haven’t found one yet.

    Could you quickly describe how you’ll do it in a better way?

    1. Peter,

      Sure… so in Fuji and after it is already included on the instance for you. But the other way to manually include it would be to import the files into UI Scripts and Content Styles tables. Most of my portals share a common header and footer so I can include the JS at the end of my footer. The CSS will automatically get included as part of the theme.

  8. Hi Nathan,

    Dropdown menu does not render properly in IE8. We are using Geneva S-N release.

    Do you have any solution for this?


Leave a Reply

Your email address will not be published. Required fields are marked *