We Keep Coding

Dropdown Menu doesn't work inside navigation bar but works outside

I am trying to add a dropdown-menu to my navigation bar. But when i click the dropdown it doesn't show me the menu.It the menu doesn't drop down. I have looked for solutions there are other related questions. But those were code-specific problems are not relevant to my code.
If i test the dropdown code taking it outside of the navgar it works. But inside the navbar it doesn't. Can anyone please help me? If you need help regarding reading this whole or need any kind of explanation, please ask.It is i who needs help.Thanks in advance.
So here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
//This is the part of dropdown//
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</nav>
And here is the CSS i am applying to it:
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
body{
background-color:#f1f1f1;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
overflow: hidden;
margin-bottom: 0;
border-radius: 0;
width: 100% ;
height: 30px;
}
.navbarw3 {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
margin-top: 40px; Add a top margin to avoid content overlay
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 565px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
And here is the javascript:
<script>
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

Based on your css classes that you used in your HTML, I assue you are using bootstrap. In that case, you really don't need to add any javascript for working with dropdown menu. make sure you linked the bootstrap css and js file in your page and then, just change the html to something like this :
<nav class="navbar justify-content-center navbar-expand-lg blackBg">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="dropdown nav-item">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#">Gallery
<span class="caret"></span>
</a>
<ul class="dropdown-menu blackBg">
<li>
Smiles
</li>
<li>
Cry's
</li>
<li>
Videos
</li>
<li>
Choreography
</li>
<li>
</li>
</ul>
</li>
</ul>
here is an example : https://jsfiddle.net/dmkh8xj1/

Hover function after scroll

I have a navbar that shrinks on scroll, the li's in the navbar-nav have an image, when the navbar shrinks on scroll the image stays but the text display becomes none.
I have a function that shows this text on hover after it disappears but i have a problem, i only want this function to work only after the navbar shrinks, and when the navbar goes to it's normal size i don't want this function to work, and another thing i want the function to display the text for each li separately because when i hover it shows all of the spans with the text, i only want the child of the li, i tried the .children() method but it didn't work, please help! here is my code:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
$('.home').hover(function() {
$(this).css('margin-right', '5px');
$('.navbar-nav li a span').css('display', 'block');
$('.navbar-nav li a').css('height', '155px');
$('.navbar-nav li a img').css('margin-right', '5px');
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>

to achieve the behaviour you want, you do not need to abuse javascript, of course it can be done with JS, but it is much easier and straightforwad is just to use CSS
just add this rule to your code:
nav.shrink .navbar-nav li:hover a span{
display: block
}
this is of course just example, but I am sure that using the CSS approach you will achieve your goal easier, faster and without extra performance overhead=)
Here is a working snippet:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
nav.shrink .navbar-nav li:hover a span{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>

CSS / Javascript - Mobile responsive menu for smaller screens

I'm helping out a friend setup a responsive menu for his website, and from some initial research we failed to find ways we could achieve this with CSS3, and it seems like it's only achievable through javascript / jquery. Having never worked with such languages I was hoping you could help us achieve this:
We'd like to make the sub-menus expand by clicking their parent li whenever the screen resolution is 1200px or less.
Below is the HTML and CSS for the menu in question which currently expands on mouse hover.
HTML
<nav id="main_navbar_container" class="navbar navbar-default ">
<div class="container">
<div class="row">
<!-- Brand and expand button get grouped for better mobile display -->
<div id="main_logo_container" class="navbar-header">
<!--Main logo container-->
<div="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='test' rel='home'>
<div>
<img src='http://localhost/wordpress/wp-content/uploads/2015/10/2015.10.13-jbits.png'width="100px">
</div><!-- site-logo -->
</a>
</div>
<!--main logo container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="menu_container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav id="primary_menu" class="nav navbar-nav">
<div class="menu-home-screen-menu-container">
<ul id="menu-home-screen-menu" class="menu">
<li id="menu-item-447" class="menu-item-447">Home
</li>
<li id="menu-item-428" class="menu-item-428">About us
</li>
<li id="menu-item-429" class="menu-item-429">Recommendations
</li>
<li id="menu-item-427" class="menu-item-427">Gallery
</li>
<li id="menu-item-13" class="menu-item-13"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-421" class="menu-item-421">Evacuation Plans
</li>
<li id="menu-item-425" class="menu-item-425">Risk Assessment
</li>
<li id="menu-item-417" class="menu-item-417">Fire safety advice
</li>
<li id="menu-item-424" class="menu-item-424">Risk Management
</li>
<li id="menu-item-423" class="menu-item-423">Fire Training
</li>
<li id="menu-item-422" class="menu-item-422">Fire Drills
</li>
</ul>
</li>
<li id="menu-item-16" class="menu-item-16"><a>Products</a>
<ul class="sub-menu">
<li id="menu-item-430" class="menu-item-430">Fire blankets
</li>
<li id="menu-item-431" class="menu-item-431">Fire extinguishers
</li>
<li id="menu-item-432" class="menu-item-432">Fire alarms
</li>
</ul>
</li>
<li id="menu-item-426" class="menu-item-426">FAQs
</li>
<li id="menu-item-420" class="menu-item-420">Contact Us
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS
#main_navbar_container{
margin-bottom:0;
background:white;
}
.navbar-collapse {
text-align:center;
}
#menu_container{
width:80%;
float:right;
display:block;
}
#primary_menu{
display:block;
float:left;
width:100%;
}
#primary_menu ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
color:#ea474b;
font-weight: 600;
display: block;
text-decoration: none;
padding: 15px 20px;
margin:auto;
}
#primary_menu a:hover{
color:#F9690E;
background: #f1f1f1;
}
#primary_menu li{
float:left;
position:relative;
margin:0
}
#primary_menu ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width:100%;
color: #8c9398;
position: absolute;
top: 3.5em;
max-height:0;
overflow-y: hidden;
}
#primary_menu ul li:hover ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width: 200px;
position:absolute;
padding:0;
margin:0;
max-height:400px;
left:-50px;
z-index:999;
transition: max-height 1s;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
}
.sub-menu li{
width:100%;
}
#primary_menu ul li ul a{
color:#ea474b;
}
#primary_menu ul li ul li:hover a{
color:#F9690E;
background: #f1f1f1;
}
#media (max-width: 1200px){
#main_navbar_container .container, #menu_container { width: 100%;}
#menu_container .navbar-collapse { padding: 0;}
#primary_menu{
width:100%;
margin:0;
}
#primary_menu li{
width:100%;
margin:5px 0 0 0;
}
#primary_menu ul li ul {
border-radius: 0 !important;
border-color: transparent !important;
background-color:rgb(238,238,238);
display:block;
max-height:0;
-webkit-transition: all 0s;
transition: all 0s;
}
#primary_menu ul li:hover{
background:none;
}
#primary_menu ul li:hover a{
font-color:black;
/*\color:rgb(207,0,15);*/
}
#primary_menu ul li:hover ul{
display:block;
position:initial;
background-color:rgb(238,238,238);
width:100%;
padding:0;
margin:0;
max-height:400px;
transition:max-height 1s;
}
#primary_menu ul li:hover li:first-of-type{
border-top:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover li:last-of-type{
border-bottom:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover a:link,
#primary_menu ul li:hover a:visited{
color:#ea474b;
}
#menu-home-screen-menu{
margin-left:0;
}
}
Fiddle to explain: http://jsfiddle.net/ee7zdtb4/
Help is greatly appreciated.
Regards,
J

We'd like to make the sub-menus expand by clicking their parent li
whenever the screen resolution is 1200px or less
You would need to use media-queries to detect the screen size and then change your CSS accordingly.
it seems like it's only achievable through javascript / jquery
No. Not at all. You can very well do this with just a clever mix of elements with corresponding pseudo-classes and adjacent sibling selector. Hint: use hidden checkboxes with labels to control the sibling elements.
Here is a small demo. It's based on an old answer of mine, changed to add media-queries to allow for fully expanded accordion style menu when the screen is larger than 768px (you can tweak it to your use-case of 1200). It gets collapsed and then is controlled by click-able first-level menu items. No Javascript, just CSS.
In the fiddle, drag and resize the output pane to see it in action. In the snippet, click full-screen and back to see it in action. Use this demo to then take it forward for your exact use-case.
Demo Fiddle: http://jsfiddle.net/abhitalks/Lqpc2Len/
Demo Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: sans-serif; font-size: 1em; }
div.accordion {
display: inline-block; vertical-align: top;
width: 240px; margin: 16px; border: 1px solid #ddd;
}
div.accordion label:last-of-type { border: none; }
input { display: none; }
input + label {
display: block; background-color: #eee;
padding: 8px; cursor: pointer; border-bottom: 1px solid #ddd;
font-family: 'segoe ui', sans-serif; font-weight: 300; transition: all 0.25s;
}
input + label:hover { background-color: #ddd; }
input + label::before {
content: '→';
display: inline-block; margin-right: 6px;
font-family: calibri, sans-serif; font-weight: 400; transition: all 0.5s;
}
div.content {
overflow: hidden; height: 0px; padding: 0px;
font-family: calibri, sans-serif; font-weight: 300;
background-color: rgba(250,250,250,0.6); transition: all 0.5s;
}
input:checked + label + div.content { height: 64px; padding: 6px; }
input:checked + label { background-color: #ddd; }
input:checked + label::before { font-weight: 600; transform: rotate(90deg); }
#media screen and (min-width: 768px) {
div.content { height: 64px; padding: 6px; }
input + label::before { font-weight: 600; transform: rotate(90deg); }
}
<div class="accordion">
<input id="i12" name="handle2" type="checkbox" />
<label for="i12">One</label>
<div class="content">Lorem ipsum</div>
<input id="i22" name="handle2" type="checkbox" />
<label for="i22">Two</label>
<div class="content">Lorem ipsum</div>
<input id="i32" name="handle2" type="checkbox" />
<label for="i32">Three</label>
<div class="content">Lorem ipsum</div>
<input id="i42" name="handle2" type="checkbox" />
<label for="i42">Four</label>
<div class="content">Lorem ipsum</div>
</div>

You can achieve all your needs in responsiveness with css media queries. If you specify max-width condition and describe all your necessary css-classes behaviour for specified width, you would have another stylings for current element at different resolution. For example,
.foo-class {
background-color: green
}
.foo-class:hover {
background-color:red;
color: white;
}
#media only screen and (max-width: 768px) {
.foo-class {
background-color: blue;
}
.foo-class:hover {
background-color: white;
color: green;
}
}
So in this case when you have monitor/screen with actual width >768px element with class .foo-class will have green background and on hover it will be with red background and white text color. If your screen of width 768px or less, then this element will be of blue background and with white background and green text color on hover action. It does not need any additional javascript logic, its pretty simple.
Also you can use popular ui framework Bootstrap. It's very simple, has a lot of modern ui features and has built in responsive support

Changing Collapsed navbar list background color

So, I'm having this issue that when I collapse my navbar(and it becomes the toggle buttom) and I toggle the list on, the background color is transparent. Since I'm using a transparente background for the navbar, that should be expected, but I when the content is toggle-on, it overlaps with the text on the screen, and it becomes messy and ugly. I would like to set the background color of the div to change when i collapse to mobile version(bootstrap), is there any way to do that?
Here are my codes:
.navbar-right .dropdown-menu {
right: 0;
left: auto;
top: 60px;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #4f82e9;
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #4f82e9;
background-color: transparent;
}
#offcanvas .navbar-nav > li:last-child > a {
border-bottom-color: transparent !important;
}
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-default .navbar-toggle {
position: relative;
float: right;
padding: 5px 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
background-color: transparent;
background-image: none;
border: 1px solid transparent !important;
border-radius: 2px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top js-navbar-top js-toggleClass">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">ABA Arquitetura</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right ">
</li>
<li>
<a class="page-scroll" href="#lancamentos">Lançamentos</a>
</li>
<li>
<a class="page-scroll" href="#services">Serviços</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contato</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Is this what you're looking for?
Add this to your CSS:
#media (max-width: 767px) {
.navbar-collapse
{
background-color:#FA0;
}
}
And a jsfiddle I used to come to this conclusion: https://jsfiddle.net/7gvg6mxp/

You could also do this:
This works fine with bootstrap 4
$(".navbar-toggler").click(function () {
$("nav").toggleClass("bg-light");
})
your background could be transparent at first, but after clicking on the toggle button the background of navbar will be 'bg-light'.

replace html class when scrolling with jquery

I have a navbar, and if I want my web page in scrolling navbar will change class. And this my web page html
how do I replace navbar-up class with navbar-down on jquery?
I've seen some tutorials on various websites but still can not
<nav class="navbar navbar-default top-postion navbar-up" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"><img src="images/kotakku-icon.png"> Kotakku</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-tabs navbar-right navbar-menu" role ="tablist">
<li>Home</li>
<li>Product</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
and this my web page css
.navbar-up{
border-radius: 0;
position: static;
width: 100%;
padding: 0 20px;
z-index: 99;
border-bottom: 4px solid #ffffff;
border-right: 0px;
border-left: 0px;
background-color: #ffffff;}
.navbar-up .navbar-brand{
color: #0E9000;
font-family: dosis;
font-size: 29px;
margin-top: -5.5px;}
.navbar-up .navbar-brand img{
width: 65px;}
.navbar-up .navbar-menu li a{
color: #0E9000;
font-size: 20px;}
.navbar-down{
border-radius: 0;
position: fixed;
width: 100%;
padding: 0 20px;
z-index: 99;
border-bottom: 4px solid #0E9000;
border-right: 0px;
border-left: 0px;}
.navbar-down .navbar-brand{
color: #0E9000;
font-family: dosis;
font-size: 27px;
margin-top: -5.5px;}
.navbar-down .navbar-brand img{
width: 52px;}
.navbar-down .navbar-menu li a{
font-size: 18px;}

Can you please make a JSFiddle and put the Fiddle link in your question? It is easier to let people to see where is your problem.
However, I suggest you probably need to do something like:
$('nav').removeClass('navbar-up');
$('nav').addClass('navbar-down');