Odoo Tutorial: Transparent, Fixed-Top Navbar

Integration of Bootstrap functionality and elegant design

Florian Fischer


Navigation bars can be boring or interesting, userfriendly or unusable, elegant or ugly. We started out to improve the default navbar of odoo. In the following tutorial we're going to show you, what route we took, what problems we encountered and how we solved them. To implement the navbar yourself, head over to GitHub and checkout the repository containing the addon for the odoo v8. Simply download the code and install the module and the transparent navbar will run on your odoo system as well. You can find the addon >>>here<<<. If you want to see the navbar in action simply head to the top of this page.

I structured the tutorial in the following manner: first I will be talking about the changes you have to make in the XML template, after I will discuss the default CSS stylings before scroll. After that the focus lies on the Javascript function that I used to differentiate the navbar into two different states (scrolled vs. not scrolled). Following I will discuss the CSS properties after scroll and problems I encountered along the way.


As you might know odoo is based on the popular CSS framework Twitter Bootstrap. We can therefore use a pretty good documentation, existing classnames and functionality. 

The first step is to inherit the header template from the website module of odoo and add it to the new addon. Following I gave the top level div of the navbar an ID. This is necessary since the generic Bootstrap classnames are used in other navigations of the odoo website builder. To avoid a mixing of styles I use the ID "custom-nav" as my main CSS selector.

Furthermore I added the Bootstrap class "navbar-fixed-top" which by default gives us the required top positioned fixed navbar.

   <div id="custom-nav" class="navbar navbar-default navbar-fixed-top">
      <div class="container">
         <div class="navbar-header">

The CSS - The navigation bar before scroll

I placed the following code inside a Media Query, so the styles are only being applied in the desktop version of the site. I played around a bit with transitioning navbars on mobile but I found them not ver user freindly. This is why I left the navbar in its default state for all devices with a screen width smaller than 768px which is the portray mode of the iPad 3/4.

@media screen and (min-width: 768px){

After that I gave the navbar its default stylings.

#custom-nav {
    background-color: rgba(0,0,0,0);
    border: 0;
    box-shadow: none;
    z-index: 999;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
    transition: background .5s ease-in-out, opacity .5s ease;

The first three properties are pretty much self explanatpory. The z-index is a css property that determines the position of the elements on the z axis of a webpage. The higher the z-index the further in the front an element is displayed. In this case I put the z-index to 999 which is slightly smaller than the default of 1030. The reason for this is that I don't want the navbar to overlap the odoo navbar.

The font smoothing property is used for a better rendering of the fonts since they sometimes become a little edgy on transitions. Additionally I gave the navbar a default transition. This doesn't do much yet but ensures that when the viewport scrolls back to the top the transition into the default state is

In the next step I'm going to adapt the dropdown menu.

#custom-nav .dropdown-menu {
    border-radius: 0;
    border: none;
    border-top: 5px solid transparent;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-top: 0;

The only important property here is border and border top. I removed the default border since it does not work visually with the transparent style. I gave it a transparent border top though to position the dropdown correctly. I could have achied that with a padding or margin but if I put the dropdown UX to open on hover there would be a small gap between dropdown and navbar. Using a border ensures that the dropdown does not close when the mouse gets into that gap.

Next up I'm styling the navbar container.

#custom-nav .container {
    padding-top: 25px;
    padding-bottom: 25px;
    -webkit-transition: padding-top .5s ease, padding-bottom .5s ease;
    -moz-transition: padding-top .5s ease, padding-bottom .5s ease;
    transition: padding-top .5s ease, padding-top .5s ease, padding-bottom .5s ease;

I'm widening the navbar by 25 pixels so I can make it collapse when I scroll back to the top. Those transitions are default states that are only activated once I scroll back up to the top.


The Javascript

Let's get to the interesting part. For the fixed navbar functionality I'm using the affix plugin of Bootstrap. You can find a detailed tutorial about this plugin here.

Add the following code to the js file to use the plugin.

$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
    } else {

What's happening here is not very complicated. I'm just adding the affix and top-nav-collapse classes once the viewport has moved more than 50 pixels. This gives me a hook to style the navbar after the user has scrolled.


CSS - after the scroll

I can now style the scrolled navbar.

#custom-nav.affix {
    top: 0;
    min-width: 100%;
    background-color: #f8f8f8;
    opacity: 0.9;
    -webkit-transition: background .5s ease-in-out, opacity .5s ease;
    -moz-transition: background .5s ease-in-out, opacity .5s ease;
    transition: background .5s ease-in-out, opacity .5s ease;

I'm just changing the background color and opacity with a transition. Additionally I styled the container and the dropdown menu. You can find the corresponding code in my GitHub addon.


CSS - for mobile

To wrap it up I'm adding a media query for mobile devices to bettle two small issues that come with the bootstrap navbar-fixed-top class. I'm giving the #wrapwrap a top padding of 50px so it doesn't overlap the content. Additionally I'm giving it a z-index so its not overlapping the default odoo navbar.

@media screen and (max-width: 767px){
    #wrapwrap {
        padding-top: 50px;
    .navbar-fixed-top {
        z-index: 999;



The only real problem I haven't found a solution to yet is the css property postion: fixed that comes from the functionality of the class navbar-fixed-top. This takes the navbar out of the normal document flow. This makes the rest of the document take up the space that is normally used by the navbar. In the following development I had to make sure all content and UI elements stay clear of the navbar.
Another problem are pages with a white background. Since we are using mainly pictures in the first section of every page we can deal with it. But some pages e.g. the odoo login page are simply white which makes the transparent navbar invisible and therefore unusable. My current solution is to detect the URL of these pages using Javascript and add the affix class accordingly so the navbar is displayed collapsed and with background.

We're now at the end of this tutorial. If you have any questions or improvements please don't hesitate to leave a comment.



GitHub addon


Bootstrap affix tutorial


Bootstrap navbar documentation