Customizing the top menu bar

The top menu bar consists of the primary navigation for your Zendesk, a number of links for accessing frequently used actions such as opening a chat window, checking your views, and creating new tickets, and also the global Zendesk search. All of these elements can be customized with CSS.

The top menu bar consists of four primary elements:
  • The menu bar background
  • The main navigation for agents (the Home, Forums, Manage, and Settings menus) and end-users (Home, Forums, Submit a request, Check your existing requests)
  • The quick menu bar for agents (the Chat, Twitter, Recent, Views, and New menus)
  • The global Zendesk search

Compared to the other CSS examples in the Cookbook, the top menu bar is complex. If you want a better understanding of how it's structured, see Anatomy of the menu bar before reviewing the CSS code examples. If you're not interested in how it's built, you can follow the code examples below (CSS code) and simply plug in your colors.

While the CSS in this article can be used to modify the web portal of the new Zendesk, it has no effect on the new agent interface.

For more information about getting started with CSS customization in Zendesk, see How to brand your Web portal.

Community tip! Blue Mango shows you how to use JavaScript to add a tab to the top menu bar!

Anatomy of the menu bar

The topmost container for the menu bar is a div called #top-menu-background.

top_menubar_background_before.png

The #top-menu-background div contains the Zendesk search, which is called #topquery.

top_menu_search.png

Nested within #top-menu-background is a div called #top-menu that contains the two sets of agent menus. On the left side of the menu bar, a div called #green contains the main agent navigation.

top_menu_green.png

The other set of menus is contained in a div called #gray.

top_menu_gray.png

The naming convention here corresponds to the default Zendesk color scheme.

All of these elements, with the exception of #gray, are interrelated in that to successfully customize the top menu bar and the drop down menus you need to change various style settings for each of them. The #gray div essentially sits on top of the menu bar and is therefore self-contained and is customized separately. Customizing the #gray menu will be described in a separate article.

Before

top_menu_before.png

After

top_menu_after.png

CSS code

Menus consist of many parts and there are many different states for some of those parts (active, inactive, hover, etc). Restyling menus can be very difficult. To make it simpler, you can ignore the structural complexity and just replace the color settings in the following CSS code with the colors of your palette.

/*** Code for formatting the top menu background, borders, and menu tabs ***/
 
/* Set the background color of the top menu bar */
#top-menu-background, #top form#topquery {
    background-color: #FF8800; /* orange */
}
 
/* Set the left border color of the tabs to the same color as the background */
ul#green.agent-tabs li.main {
    border-left: 2px solid #FF8800; /* orange */
} 
 
/* This code controls the positioning of the menu tabs.
*  No need to change anything here - just be sure to include it. */
ul#green.agent-tabs li.tab_home.first, ul#green.agent-tabs li.tab_home.first:hover, ul#green.agent-tabs li.tab_forums, ul#green.agent-tabs li.tab_forums:hover {
    border-left: 0!important;
    padding-left: 0!important;
}
 
/* Set the hover background color for the inactive (unselected) tabs */
ul#green.agent-tabs li.main:hover, ul#green.agent-tabs li.over, ul#green li.main:hover {
    background:#6F7866; /* gray */
}
 
/* Set the hover background color for the active (selected) tab */
ul#green.agent-tabs li.active:hover, ul#green.agent-tabs li.active.over {
    border-left: 2px solid #FF8800; /* orange */
    background:#6F7866; /* gray */
}
 
/*** Code for formatting the drop down menus (Manage and Settings) ***/
 
/* Set the drop down menu section labels (Business Rules and Sandbox) */
#green li.drop-header {
	color:#464646; /* dark gray */
	background-color: #F1F2E8; /* tan */
} 
 
/* Set the drop-down menu background and border color */
#green ul.menu-drop {
	border-color:#FF8800; /* orange */
	background-color: #F1F2E8; /* tan */
}
 
/* Set the drop-down menu list item text and background color  */
#green ul.menu-drop li a {
	background-color: #F1F2E8; /* tan */
	color: #6F7866; /* gray */
} 
 
/* Set the drop-down menu list item text and background hover color */
#green ul.menu-drop li a:hover {
	color: #FFFFFF; /* white */
	background-color: #FF8800;  /* orange */
}

This code also formats the menus in the end-user Web portal (Home, Forums, Submit a request, Check your existing requests) and the language selection drop down menu.

top_menu_language.png

 

 

Have more questions? Submit a request

Comments

  • Avatar
    Donna Knott

    Where can I find the article for customizing the #gray menu? 

  • Avatar
    Anton de Young

    Donna,

    I haven't pulled together a topic for the gray menu yet. However, it's pretty similar to the green menu. Here's some CSS code that covers some of the basics:

    /*** TOP MENU BAR - GRAY DROP DOWN MENUS ***/

    /* Set the drop-down menu background and border color */

    #gray ul.menu-drop {

    border-color: #727070;

    background-color: #FFFFFF;

    }

    /* Set the drop-down menu list item text and background color */

    #gray ul.menu-drop li a {

    background:#FFFFFF;

    color: #6F7866;

    }

    /* Set the drop-down menu list item text and background hover color */

    #gray ul.menu-drop li a:hover {

    background: #FFCD72;

    color: #FFFFFF;

    }

    /*** VIEWS DROP DOWN MENU ***/

    /*** The elements in #gray can be set separately ***/

    /* Set the drop-down menu background and border color */

    #gray #views-drop {

    border-color: #727070;

    background-color: #FFFFFF;

    }

    /* Set the drop-down menu list item text and background color */

    #gray #views-drop li a {

    background:#FFFFFF;

    color: #6F7866;

    }

    /* Set the drop-down menu list item text and background hover color */

    #gray #views-drop li a:hover {

    background: #FFCD72;

    color: #6F7866;

    }

  • Avatar
    Donna Knott

    Hi Anton

    This was great thank you, just copied into my widget and amended the colours from there. I still can't change the colour of the actual bar, we want the tabs to have black backgrounds and orange font. Is this possible at all or does it have to stay grey with white font? Or am I doing something wrong?

    Any suggestions would be great.

    Donna

  • Avatar
    Max McCal

    Hi, Donna -

    I took a look into this and found that I was able to adjust the background color and font colors on the individual options in this bar with some more specific IDs and Classes:

    #gray li#twitter_menu, #gray li#chat_menu, #gray li.main.clazz.tab_recent, #gray li.main.clazz.tab_new, #gray li.main.clazz.tab_views {

    background: #707070;

    color: #6F7866;

    }

    You can see that I'm calling each one individually, which was the only way to adjust the color. Please give it a try!

     

    Max

  • Avatar
    Donna Knott

    Thanks Max, worked like a charm :D

  • Avatar
    Hellen Allsop

    Hi

    I'd like to change the font colour of the top menu bar items (Home, Forums, Manage, Settings) - is there a snippet to do this that I can't find?

    Thanks, Hellen

  • Avatar
    Max McCal

    Hi, Helen -

    Try these out to change the color of your text. I've set all of them to black in these examples, so you only need to adjust the hex code to update.

    /* Set the font color of text in dropdown menu selections */

    #top-menu ul#green.agent-tabs li ul.menu-drop li a {

    color:#000000;

    }

    /* Set the font color of text in dropdown menu selections while with mouse over */

    #top-menu ul#green.agent-tabs li ul.menu-drop li a:hover {

    color:#000000;

    }

    /* Set the font color of menu items, i.e,. "Home," "Manage," etc. */

    #top-menu ul#green.agent-tabs a {

    color:#000000

    }

    /* Set the font color of the currently selected menu item */

    #top-menu ul#green.agent-tabs li[class$="active"] a {

    color:#000000

    }

  • Avatar
    Hellen Allsop

    Thanks Max - works a treat :)

  • Avatar
    Antti Merenvainio

    Hi

    Is there a way to change the titles of the menu bar for end-users (Home, Forums, Submit a request, Check your existing requests)? I´d like to translate them into Finnish.

     

    Thanks

    Antti

     

  • Avatar
    Max McCal

    Hey, Antti - We can't change text using CSS (it's only able to change style sheets, not the actual HTML elements that are being affected), but Zendesk Plus+ subscribers have a feature to allow end users to select additional languages, and you can customize the default language of your helpdesk as well. Language settings are contained on the Settings > Account > Localization menu. If you have questions, contact us at support@zendesk.com and we can walk you through it.

  • Avatar
    Sarah Crane Newman

    Hi Max and Anton,

    Thank you for all of these! I'm trying these in a Sandbox, and I've set the widget to be open to all users, even those not logged in. When I'm logged in, it works like a charm. When I log out, the new background color for the menu bar is still there, but the updated font colors and hover colors aren't. Any thoughts about what's going on?

    Thanks!

    Sarah

  • Avatar
    Max McCal

    Hey, Sarah -

    The reason that your menu bar customizations worked for your agents, but not when you're logged out is that the selectors are actually slightly different when you're logged in. The options agents have in their menu are classed as .agent-tabs, whereas the same menu bar for end-users has different options, and is still ID'd as #green. If you're setting the text color for your agent tabs like this: 

    #top-menu ul#green.agent-tabs a {
    color: #FFFFFF;
    }

    You need to also call out the end-user versions of the tab. You should be able to transform the above code like this:

    #top-menu ul#green.agent-tabs a, #top-menu ul#green li a {
    color: #FFFFFF;
    }

    Let me know if that works out!

  • Avatar
    Sarah Crane Newman

    Thanks, Max, I think that's solved it!

  • Avatar
    ADIL Younes

    Hi,

    I want to put the Top menu bar vertically, how I can do ?

    Thanks

  • Avatar
    Max McCal

    @ADIL Younes - 

    If there's a way to re-orient the position of objects like that using CSS, I'm not aware of it. That would involved altering the HTML that actually determines the position of objects on the page. You might be able to make a change like that using Javascript widgets, but I don't really have the expertise to suggest a method personally.

  • Avatar
    Israel Vela

    Hi, I've been able to change the look of the menu bar for agents but it doesn't change for end-users. All I'm interested for the time being is background, border and drop-down menu. So, what I have is this:

    * Set the background color of the top menu bar */

    #top-menu-background, #top form#topquery {

    background-color: #F59022; /* orange */

    }

    /* Set the left border color of the tabs to the same color as the background */

    ul#green.agent-tabs li.main {

    border-left: 2px solid #F59022; /* orange */

    }

    /* Set the drop-down menu background and border color */

    #green ul.menu-drop {

    border-color:#F59022; /* orange */

    background-color: #ffffff; /* white */

    }

    I'm not sure if this is already answered but I have been able to figure out what I need to add in order for this settings to apply to end-users. Any help would be greatly appreciated

  • Avatar
    Jill Kaselitz

    Hi, Israel -

    It sounds like you'll need to change who your custom CSS widget is available for. You'll want to select Anyone, Including people who have not logged in as seen in the attached screenshot. Please let us know if this doesn't resolve your request.

  • Avatar
    Israel Vela

    Jill, you are totally right. Forgot to take that into account. Now it works as desired. Thanks!

  • Avatar
    Jacob Doogie Thomas

    I have customized heaps of the CSS code in my Zendesk accounts but have run into a roadblock. I can't seem to make the grey menu twitter or chat hover colour change from the deep grey that is the default. Also, i cant make the font color in the twitter menu, the recents menu change for the ticket ID or requester name. These are the last few issues i need to work out to get my customizations completed.

  • Avatar
    Corey Harrington

    I havent been able to find out how to change the color of the tab thats selected, instead of it turning the default white.

    Any help with this? I want it to be a light greyish when selected.

  • Avatar
    Sara Menefee

    @Jacob Doogie Thomas: 

    If you want to make adjustments to the Gray menu (containing Chat, Twitter, etc) you can use the following CSS in a custom Global CSS widget. Obviously, make changes to colors as you see fit.

    /* Set the background for Recent, Views, Twitter, Chat and New */

    ul#gray, #gray li#twitter_menu, #gray li#chat_menu, #gray li#phone_menu {

    background-color: #87CEFA; /*skyblue */

    }

    /* Set font color for Views, Recent and New */

    #gray li a.tab {

    color: #FFFFFF !important;

    }

    /* Set background for hovered over gray menu items */

    ul#gray li:hover, #gray li#twitter_menu:hover, #gray li#chat_menu:hover, li#phone_menu:hover {

    background-color: #FFB6C1 !important; /* cottoncandypink */

    }

    /* Color of ticket numbers and requester names for Recent */

    #gray div.r_n, #gray span.id, ul#gray li.drop-header {

    color:#000000;

    }

    /* Set the drop-down menu background and border color */

    #gray ul.menu-drop {

    border-color: #2734B1;

    background-color: #FFFFFF;

    }

    /* Set the drop-down menu list item text and background color */

    #gray ul.menu-drop li a {

    background:#FFFFFF;

    color: #000000;

    }

    /* Set the drop-down menu list item text and background hover color */

    #gray ul.menu-drop li a:hover, #gray ul.men-drop a.on:hover {

    background-color: #FFFFFF !important;

    color: #87CEFA; /*skyblue */

    }

    Hope this works as a solution for you. 

  • Avatar
    Corey Harrington

    no I mean the left side of the bar. When you select one of the options like "knowledge base" the section turns white, so all you can see is the text. I want to change this so that it stays a solid color. I don't believe this has been touched on. We have our gray menu the way we want it.

  • Avatar
    Max McCal

    Hey, Corey - 

    That reply was meant for the poster before you. We're still looking into a solution for you and will get you something soon!

  • Avatar
    Corey Harrington

    I figured it out. Thanks though.

  • Avatar
    Roland Monsegu

    Hi,

    I need a link back to my website. Can I had a tab on the top-menu bar with a link to external website?

  • Avatar
    Max McCal

    Hey, Roland

    You could add a tab to that menu bar using Javascript, but that goes outside the scope of what CSS is capable of. CSS is only able to change the style of existing elements; it has no ability to alter the structure of HTML or add or remove content. 

  • Avatar
    paul emery

    Hi

    I've made a lot of changes to make the system look like our other sites but i have a couple of small things I just can't get to work how I want.

    1. The bottom corners of the menu bar have rounded edges can I get rid of these to have square corners?

    2. Above the menu bar and below the header there is a small white line that i can't get rid of.  I can see any bit of code that is responsible for it but I must have something wrong somewhere, any ideas?

    I've added a picture

  • Avatar
    Dave Dyson

    Hi Paul -

    Both of these can be set with Global CSS widgets; you'd want to set them to viewable by "Anyone", of course:

    1. #top-menu-background, .menu-drop { -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; }

    2. #header { margin-bottom:0px; }

    That should do it!

  • Avatar
    Pcava

    how would I adjust the height of the top menu?

  • Avatar
    Anton de Young

    Pcava,

    The outermost container for the top menu bar is top-menu-background. The default height is 26px, as shown here:

    #top-menu-background {height: 26px;}

    However, you'd need to also resize the elements within the top menu bar to match (the green and gray menus for example). That's probably one of the trickier customizations to make. 

Please sign in to leave a comment.