---
sourceDocument: Yokohama ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Menu style customization

# Menu style customization {#ariaid-title1}

Release version: Yokohama  
Updated January 30, 2025  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Menu style customization

ServiceNow allows you to customize the visual style of your site menus by modifying the style sheets.
You can access these style sheets viaContent Management \> Design \> Style Sheets.
This capability enables you to tailor the look and feel of existing menus without needing to develop a new menu system, using CSS to achieve the desired appearance.
Show full answer Show less  

## Menu Style Customization Approach

The provided examples illustrate how to customize two types of menus using CSS:

* **Supplementary Page Navigation Menu:** Uses CSS class selectors applied to block containers within the site layout. This example shows how submenu blocks and sections are styled for width, padding, color, and positioning, highlighting that CSS alone can significantly alter menu presentation.
* **Super Menu Sections:** Demonstrates a float grid layout for a super menu, where default styles are overridden by applying specific CSS classes to containers. This includes styling the menu bar, menu items, selected states, and content blocks with properties like background images, borders, shadows, and z-index for layering.

## Key Style Elements and Their Practical Use

* **Container Styling:** Defines size, float behavior, padding, and background images to control layout and visual grouping of menu blocks.
* **Text and Link Styles:** Controls font size, color, capitalization, and spacing for menu headers and links to ensure readability and brand consistency.
* **Menu Item States:** Uses CSS classes to distinguish normal and selected menu items, including hover effects, background changes, and border styling.
* **Menu Content Display:** Positions submenu content blocks absolutely with shadows and borders for clear layering and visual depth.
* **Hiding Unnecessary Elements:** For example, hiding menu bullet images to clean up the menu appearance.

## What This Enables for ServiceNow Customers

By leveraging these CSS customization techniques:

* You can efficiently modify existing menu styles to match your corporate branding or user experience requirements.
* You avoid the complexity and overhead of building new menu systems, reducing development and maintenance effort.
* You gain control over menu layout, typography, colors, and interactive states, enhancing navigation clarity and aesthetics.
* You can adapt menus used in different site areas, such as supplementary navigation columns and header super menus, ensuring a consistent and polished user interface.  
You can customize menu styles in the style sheets your site uses.

Navigate to Content ManagementDesignStyle Sheets to customize style sheets.

## Supplementary page navigation menu example code

In the following example, look at the CSS class selectors and rules. Also, review how the
block containers (div.cms_menu_section_blocks) are defined based on the outer container
(TD.layout_content_submenu_column). The outer container is actually a part of the site layout.  
This concept is clearer if you compare the styles to the styles used in the super menu further down in the example. This example shows that there is no need to make a completely new menu system. You can use CSS to change the look and feel of existing menus.

    /*********************************************************************************************************************************************************
       SUB MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu (cms_menu_section_blocks UI Macro)
    *********************************************************************************************************************************************************/
    TD.layout_content_submenu_column DIV.cms_menu_section_blocks {
        width: 156px;
        height: auto;
        float: left;
        position: relative;
        border-style: solid;
        margin: 0px 0px 0px 0px;
        border: 0px solid #e0e0e0;
        padding: 0px;
        background: none;
        padding: 24px 12px 0px 12px;
    }
     
    TD.layout_content_submenu_column DIV.sub_menu_section {
        width: 156px;
        height: 20px;
        float: left;
        border-style: solid;
        border: 0px solid #e0e0e0;
        padding: 0px;
        background: none;
        padding: 0px 12px 0px 12px;
    }
     
    SPAN.cms_sub_menu_list_link, TD.submenu_cell A   {
        color: #FFF;
    }
     
    TD.layout_content_submenu_column IMG.menu_bullet{
    	display: none;
    }
     
    TD.cms_menu_section_blocks_title h2, TD.cms_menu_section_blocks_title h2 a, TD.cms_menu_tab_blocks_text h2 {
        margin:0;
        padding: 0px;
        font-size: 11px;
        text-transform: uppercase;
        color: #42C4DD;
        font-weight: normal;
        white-space: nowrap;
    }
     
    TD.layout_content_submenu_column a.cms_menu_block_item {
        margin:0;
        padding: 0px;
        font-size:11px;
        color:#FFF;
    }
     
    TR.layout_content_submenu_row TD.layout_content_submenu_column{
    	background: transparent url(sub_menu_background.gifx) repeat-y center top !important; 
    }

## Super menu sections example code

The following menu is a simple float grid. The defaults are written first. Then, below the "SUPER MENU VARIATIONS..." comment, the defaults are overwritten by adding a containing div with a unique class. In the code that renders the header for the base system, the bottom menu resides in a table cell with the class of `cms_header_bottom_menu` (refer to the TD.cms_header_bottom_menu CSS selector).

    /*********************************************************************************************************************************************************
       SUB MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu (cms_menu_section_blocks UI Macro)
    *********************************************************************************************************************************************************/
     
    TD.layout_content_submenu_column DIV.cms_menu_section_blocks {
        width: 156px;
        height: auto;
        float: left;
        position: relative;
        border-style: solid;
        margin: 0px 0px 0px 0px;
        border: 0px solid #e0e0e0;
        padding: 0px;
        background: none;
        padding: 24px 12px 0px 12px;
    }
     
    TD.layout_content_submenu_column DIV.sub_menu_section {
        width: 156px;
        height: 20px;
        float: left;
        border-style: solid;
        border: 0px solid #e0e0e0;
        padding: 0px;
        background: none;
        padding: 0px 12px 0px 12px;
    }
     
    SPAN.cms_sub_menu_list_link, TD.submenu_cell A   {
        color: #FFF;
    }
     
    TD.layout_content_submenu_column IMG.menu_bullet{
    	display: none;
    }
     
    TD.cms_menu_section_blocks_title h2, TD.cms_menu_section_blocks_title h2 a, TD.cms_menu_tab_blocks_text h2 {
        margin:0;
        padding: 0px;
        font-size: 11px;
        text-transform: uppercase;
        color: #42C4DD;
        font-weight: normal;
        white-space: nowrap;
    }
     
    TD.layout_content_submenu_column a.cms_menu_block_item {
        margin:0;
        padding: 0px;
        font-size:11px;
        color:#FFF;
    }
     
    TR.layout_content_submenu_row TD.layout_content_submenu_column{
    	background: transparent url(sub_menu_background.gifx) repeat-y center top !important; 
    }


    4.2 2. Super Menu Sections Example Code

    This menu is essentially a simple float grid. The defaults are written first. Then, below the "SUPER MENU VARIATIONS..." comment, the defaults are overwritten by adding a containing div with a unique class. In the code that renders the header for the base system, the bottom menu resides in a table cell with the class of "cms_header_bottom_menu" (note the TD.cms_header_bottom_menu CSS selector).

    /*******************************************************************************************
       Section Blocks Menu (cms_menu_section_blocks UI Macro)
    *******************************************************************************************/
    div.cms_menu_section_blocks {
        width: 260px;
        height: 260px;
        float: left;
        border-style: solid;
        margin: 0px 0px 12px 12px;
        border: 1px solid #e0e0e0;
        padding: 10px;
        background: url(blue/portal_horizontal_bkg.pngx) repeat-x center bottom; 
    }
     
    p.cms_menu_separator {
        border-top:1px dotted #ccc;
        margin-top: 6px;
        margin-bottom: 6px;
    }
     
    td.cms_menu_section_blocks_title h2, td.cms_menu_section_blocks_title h2 a, td.cms_menu_tab_blocks_text h2 {
        margin:0;
        padding: 0px;
        font-size: larger;
        font-weight: normal;
        color:#444;
    }
     
    a.cms_menu_block_item {
        margin:0;
        padding: 0px;
        color:#999;
        font-size: inherit; 
    }
     
    /*******************************************************************************************
       SUPER MENU VARIATIONS FOR HORIZONTAL MENUS - Section Blocks Menu (cms_menu_section_blocks UI Macro)
    *******************************************************************************************/
    TD.cms_header_bottom_menu .cms_menu_super_menu_bar { /*style the super menu drop down bar */
       z-index: 199;
       float: left;
       background: none;
       margin-left: 44px;
    }
     
    TD.cms_header_bottom_menu div.cms_menu_section_blocks {
        width: 200px;
        float: left;
        border: 0px;
        margin: 0px 0px 12px 0px;
        padding: 0px;   
        background: none; 
    }
     
    TD.cms_header_bottom_menu p.cms_menu_separator {
        border-top:0px dotted #ccc;
        margin-top: 0px;
        margin-bottom: 0px;
    }
     
    TD.cms_header_bottom_menu  .cms_menu_super_menu_bar_item {  /*style an item on the super menu drop down bar*/ 
       z-index: 200;
       float: left; 
       padding-left: 12px; 
       padding-right: 12px;
       padding-bottom: 8px;
       padding-top: 4px;
       cursor: pointer;
       cursor: hand;
       font-weight: bold;
       color: #000;
       border-left: 1px solid #FFF;
       border-top: 1px solid #FFF;
    }
     
    TD.cms_header_bottom_menu  .cms_menu_super_menu_bar_item_selected {  /*style a selected item on the super menu drop down bar*/ 
       z-index: 200;
       float: left; 
       padding-left: 12px; 
       padding-right: 12px;
       padding-bottom: 8px;
       padding-top: 4px;
       cursor: pointer;
       cursor: hand;
       background: #fff url(super_menu_bkg.gifx) no-repeat left top;
       font-weight: bold;
       border-right: 0px solid #CCC;
       border-bottom: 0px solid #CCC;
       border-left: 1px solid #DDD;
       border-top: 1px solid #EEE;
     
    }
     
    TD.cms_header_bottom_menu  .cms_menu_super_menu_content { /* style super menu content block */
       position: absolute;
       z-index: 999;
       height:260px;
       display: none;
       padding: 18px;
       background: #dedfe0 url(super_menu_bkg.gifx) no-repeat left top;
       border-right: 1px solid #CCC;
       border-bottom: 1px solid #CCC;
       border-left: 1px solid #DDD;
       box-shadow: 5px 5px 6px #666;
       -webkit-box-shadow: 5px 5px 6px #666;
       -moz-box-shadow: 5px 5px 6px #666;
       filter: progid:DXImageTransform.Microsoft.dropShadow(color=#666, offX=5, offY=5, positive=true);
    }
     
    TABLE.super_menu_video_table {
        background: #787878 url("grey_background.pngx") repeat-y scroll center top;
    	width: 184px;
    }

*[\>]: and then