Cacher is the code snippet organizer for pro developers

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

	/* Styles before scroll */
	#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;
	}

	#custom-nav a {
		background: transparent;
		color: black;
	}

	#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;
	}

	#custom-nav .dropdown-menu li {
		border-top: 1px solid white;
	}

	#custom-nav .dropdown-menu li:last-child {
		border-bottom: 1px solid white;
	}

	#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;
	}

	/* Styles after scroll */
	#custom-nav.affix {
	    top: 0;
	    min-width: 100%;
	    background-color: #98FB98;
	    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;
	}

	#custom-nav.affix a {
		color: white;
	}

	#custom-nav.affix .container {
	    -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;
	    padding-top: 40px;
	    padding-bottom: 8px;
	}

	#custom-nav.affix .dropdown-menu {
	    -webkit-transition: background .5s ease-in-out;
	    -moz-transition: background .5s ease-in-out;
	    transition: background .5s ease-in-out;
	    border-top: 9px solid transparent;
	    background: #f8f8f8;
	}
}

@media screen and (max-width: 767px){
	#wrapwrap {
		padding-top: 50px;
	}

	.navbar-fixed-top {
		z-index: 999;
	}
}

$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $('#custom-nav').addClass('affix');
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $('#custom-nav').removeClass('affix');
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }

});

<?xml version="1.0" encoding="utf-8"?>
<openerp>
	<data>
		<template id="transparent navbar" inherit_id="website.layout">
		<xpath expr="//header" position="replace">
			<header>
				<div id="custom-nav" class="navbar navbar-default navbar-fixed-top">
					<div class="container">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-collapse">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
									</button>
									<a class="navbar-brand" href="/" t-field="res_company.name" />
								</div>
								<div class="collapse navbar-collapse navbar-top-collapse">
									<ul class="nav navbar-nav navbar-right" id="top_menu">
										<t t-foreach="website.menu_id.child_id" t-as="submenu">
											<t t-call="website.submenu" />
										</t>
										<li class="divider" t-ignore="true" t-if="website.user_id != user_id" />
										<li class="dropdown" t-ignore="true" t-if="website.user_id != user_id">
											<a href="#" class="dropdown-toggle" data-toggle="dropdown">
												<b>
													<span t-esc="user_id.name" />
													<span class="caret"></span>
												</b>
											</a>
											<ul class="dropdown-menu js_usermenu" role="menu">
												<li>
													<a href="/web" role="menuitem">My Account</a>
												</li>
												<li>
													<a t-attf-href="/web/session/logout?redirect=/" role="menuitem">Logout
													</a>
												</li>
											</ul>
										</li>
									</ul>
								</div>
							</div>
						</div>

			          <div style="height:90px;"/>

					</header>
				</xpath>
			</template>

		</data>
	</openerp>

<?xml version="1.0" encoding="utf-8"?>
<openerp>
	<data>

		<template id="assets_frontend" inherit_id="website.assets_frontend" name="transparent_sticky_navbar">
            <xpath expr="." position="inside">
                <link href="/modeule_name/static/src/css/navbar.css" rel="stylesheet"/>
                <script type="text/javascript" src="/module_name/static/src/js/navbar.js"></script>
            </xpath>
        </template>
    </data>
	</openerp>

<template id="transparent navbar" inherit_id="website.layout">
	<xpath expr="//header" position="replace">
		<header>
      (your new html code and this is will replace base header template)
    <header>
  <xpath>
<template>