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

  • 0

    I set the top menu bar to have a blue background and white text - it works in the agent view but not in the enduser view, it sets the text to black.

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

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

    color:#FFFFFF

    I set the currently selected menu item to show up as light grey again - it works in the agent view but not in the enduser view, it sets the text to black.

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

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

        color:#A8A8A8  /* light gray */

    All else is working just fine, Assistance would be appreciated.

  • 0

    Anton, That code didn't work to 'uncapitalize' Why would you add "capitalize" when I'm trying to undo this? Basically, all I want is to have text as is--neither uppercase, nor lowercase. Capitalized first letter only (Home, Forums...).

    Undoing Zendesk CSS is proving more challenging than creating from scratch.

  • 0

    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

     

  • 0

    Max - Thanks, your suggestions worked like a charm.

  • 0

    Is there source code available for the actual drop down effect? I can't find anything specific as to writing the javascript on the drop downs in a Zendesk javascript extension.

  • 0

    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.

  • 0

    How can I remove the 'submit a request' and 'check your existing requests' tabs from the top menu?

     

    Alternatively, can I redirect them to another zendesk account?

  • 0

    No this is a different question...  the other one was dealing with the js/ css to remove the home tab and flashing caused by a custom js code.    The question above I am asking about the vertical lines in between the main nav items...  "home"   |   "submit a request"   |   "check your existing requests".    I can't find the selectors in firebug or in the stylesheet that is putting these in there.   if you go to our web portal at plexustechnology.zendesk.com  you will see that they flash on hover and selected, and are too high.  I also shifted the nav to the right and removed the home tab so the first one is unnecessary.    Thanks as always for the prompt response.

  • 0

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

  • 0

    Tara,

    You can hide those buttons with a CSS widget like this:

    .tab_new {display:none;}

    .tab_requests {display:none;}

    People often want to hide those buttons for anyone who is not logged in, and show them again for logged in users. You can achieve this by setting the first widget (above) to be "Available for: Anyone, even users who are not logged in", and setting the following widget to "Available for: People who have logged in".

    .tab_new {display:inline !important;}

    .tab_requests {display:inline !important;}

     

    Changing the destination of the links to another Zendesk account (or elsewhere) is a bit trickier, but you can use a JavaScript widget like the following:

    $j('li.tab_new').html('<a href="https://otheraccount.zendesk.com/anonymous\_requests/new" class="tab">Submit a request</a>');

    $j('li.tab_requests').html('<a href="https://otheraccount.zendesk.com/requests" class="tab">Check your existing requests</a>');

    The catch with this is that you are switching out the content of the button, so you must insert the modified content. Then make sure you set the widget to "Available to: People who are not agents". That way it won't affect the agent buttons.

    I hope that helps, let us know if you run into additional issues.

  • 0

    Oh, sorry about that! I was reading too fast, I guess. :)

    Our community lead is looking into this and will get back to you.

    Thanks!

  • 0

    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!

  • 0

    Thanks Joseph, that's just what I needed!

  • 0

    Hi Dylan, 

    From what we can tell (I checked with one of our CSS/HTML experts) the menu behavior is actually something that's being done server side, which makes it inaccessible. It's possible with the next version of the forums (in progress now) that may not be true but I don't have a way to check. I hope you're able to achieve most of what you need!

  • 0

    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

  • 0

    Hey Andrew: 

    Create a Global Javascript widget and drop in the code below. Just change change the URL for a href and edit the home tab text if needed. 

    Event.observe(window, 'load', function() { 

    if ($$('#top-menu #green .tab_home')[0]){ 

    $$('#top-menu #green .tab_home')[0].update('<a href="http://YOURSITEHERE.com" class="tab">HOME BUTTON TEXT</a>'); 



    });

  • 0

    Thanks, Chris. Glad you got what you needed! And thanks for sharing the info here.

  • 0

    Hi,

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

    Thanks

  • 0

    I'd like to make the "home" link in my ZenDesk account go to my main website instead of my customer support portal (ZenDesk) - is that possible?

  • 0

    Hi Chris, 

    I checked with one of our CSS experts and she found that the little bars are coming from the background. Use this code to hide them: 

    li.main {

    background: none;

    }

  • 0

    @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.

  • 0

    Corey, in the above thread asked a question that I'm struggling with as well, but it was never answered... I haven't been able to find out how to change the color of the tab that's selected, currently the default is white. This is on the left hand side of the nav 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. Also, how can I change the text color of the main nav tabs like "knowledge base"? Thanks!

  • 0

    Thanks Laura and Jennifer...  knowing that selector let me move the lines downward and keep them visible on hover.  Thank you for your quick responses... I am amazed at the speed of your helpdesk :)

    for anyone else looking to change this:

    li.main {

    url("/images/menu.png") no-repeat scroll 0 -78px transparent;

    }

    that is the original positioning of it, so if you change the height of the header they wont line up anymore, and if you follow the tutorial on changing the hover elements, the background of the hover will override this image unless you include the above line in the hover too.

  • 0

    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

  • 0

    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? 

  • 0

    Hi... Im having a difficult time determining what selector is placing the little gray vertical lines in between the main nav menu items on the customer portal.  My hover changes are making them disappear, and I also need to move them down a bit.  Can you point me in the right direction?   Thank you kindly.

  • 0

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

  • 0

    Hi Mummii: 

    I think you're looking for this: 

    /* 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 */
    }

  • 0

    Hi Chris,

    I think Jake answered your question in another forum, right? Let us know if you need anything else!

  • 0

    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.

Powered by Zendesk