I am using bootstrap 5 I have taken a sample of JavaScript that allows a pop-out sidebar open on the left with the option to close the sidebar once opened.
Inside the sidebar I have a navigation menu with menu-links (in list format)
I want it so when the user has opened the sidebar, if they decide to click to close the sidebar it will also de-collapse/close the menu lists (#submenu1, #submenu2 and #submenu3) if any and all that are open/collapsed.
I am unsure of how to achieve this in JavaScript... surely its something simple?
The javascript also makes some adjustments to the body... this does not need to be changed/effected so ignore the parts of the JS regarding body classes etc...
JS:
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Validate that all variables exist
if(toggle && nav && bodypd && headerpd){
toggle.addEventListener('click', ()=>{
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle','nav-bar','body-pd','header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink(){
if(linkColor){
linkColor.forEach(l=> l.classList.remove('active'))
this.classList.add('active')
}
}
linkColor.forEach(l=> l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
HTML:
<div class="header_toggle"> <i class="bx bx-menu" id="header-toggle"></i> </div>
<div class="l-navbar show" id="nav-bar">
<nav class="nav">
<div> <a href"="" shopuserproducts"="" class="nav_logo"> <img style="width: 30px;" src="/Images/favicon.svg"> <span class="nav_logo-name">ABC Test</span> </a>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav_link collapsed" aria-expanded="false"> <i class="bx bxs-car-mechanic"></i> <span class="nav_name">
Commercial Parts</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu1" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Suspension</span>
</li>
<li>
<span class="d-none d-sm-inline">Braking</span>
</li>
<li>
<span class="d-none d-sm-inline">Filtration</span>
</li>
<li>
<span class="d-none d-sm-inline">Engine</span>
</li>
<li>
<span class="d-none d-sm-inline">Exhaust</span>
</li>
</ul>
</li>
<li>
<i class="bx bx-spray-can nav_icon"></i><span class="nav_name">Refinish</span>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse" id="submenu2" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">Spray Guns</span>
</li>
<li>
<span class="d-none d-sm-inline">Clearcoat Kits</span>
</li>
<li>
<span class="d-none d-sm-inline">Primers</span>
</li>
<li>
<span class="d-none d-sm-inline">Body Fillers</span>
</li>
<li>
<span class="d-none d-sm-inline">Panel Wipe</span>
</li>
<li>
<span class="d-none d-sm-inline">Tinters</span>
</li>
<li>
<span class="d-none d-sm-inline">Abrasives</span>
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav_link active" aria-expanded="true"> <i class="bx bxs-t-shirt"></i> <span class="nav_name">
PPE & Workwear</span></a>
<ul class="nav-sub-cat flex-column ms-1 custom-scrollbar-js collapse show" id="submenu3" data-bs-parent="#menu" style="">
<li class="w-100">
<span class="d-none d-sm-inline">T-Shirts & Polo's</span>
</li>
<li>
<span class="d-none d-sm-inline">Jackets</span>
</li>
<li>
<span class="d-none d-sm-inline">Hi-Visibility</span>
</li>
<li>
<span class="d-none d-sm-inline">Eye Protection</span>
</li>
<li>
<span class="d-none d-sm-inline">Headwear</span>
</li>
<li>
<span class="d-none d-sm-inline">Gloves</span>
</li>
</ul>
</li>
<hr style="color: white;">
<div class="nav_list">
<i class="bx bx-grid-alt nav_icon"></i> <span class="nav_name">Dashboard</span>
<i class="bx bx-shopping-bag nav_icon"></i> <span class="nav_name">Shop</span>
<i class="bx bx-cart"></i> <span class="nav_name">Cart</span>
<a href="/AccountManage" class="nav_link"> <i class="bx bx-user nav_icon"></i> <span class="nav_name">My
Account</span> </a>
</div>
<i class="bx bx-log-out nav_icon"></i> <span class="nav_name">SignOut</span>
</div></nav>
</div>
Related
In "nopCommerce" I want to change the side category navigation.
Now, when somebody clicks a category, it shell be expanded... but it not works.
The HTML is looking like this:
(...)
$(document).ready(function() {
$('.dropdown').on('click', function() {
var $this = $(this)
$this.next('a.dropdown-toggle').attr('aria-expanded', 'true');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=master-column-wrapper>
<div class=container>
<div class=row>
<div class="sidebar col-md-3">
<div class="block block-category-navigation well box-shadow-wrapper">
<div class="wjktitle main-title"><strong>Kategorien</strong></div>
<div class="wjklistbox MainMenu">
<ul class="nav nav-list">
<li> (0) </span> <span> </span>
<li class=dropdown>
<span class="fa fa-angle-down visible-xs"></span>
<a class=dropdown-toggle href=/de/pickup role=button aria-expanded=false> Pickup (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (0) </span> <span> </span>
<li> (0) </span> <span> </span>
<li> (0) </span> <span> </span>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/vw role=button aria-expanded=false> VW (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/bully role=button aria-expanded=false> Bully (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (0) </span> <span> </span>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/2015- role=button aria-expanded=false> 2015- (2) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (2) </span> <span> </span>
<li> (0) </span> <span> </span>
</ul>
</ul>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/golf role=button aria-expanded=false> Golf (0) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li class=dropdown><span class="fa fa-angle-down visible-xs"></span> <a class=dropdown-toggle href=/de/2015--2 role=button aria-expanded=false> 2015- (0) </a>
<ul class="dropdown-menu sub-menusublist first-level" role=menu>
<li> (0) </span> <span> </span>
<li> (0) </span> <span> </span> </ul>
<li> (0) </span> <span> </span> </ul>
</ul>
</ul>
<li> (0) </span> <span> </span> </ul>
</div>
</div>
a.dropdown-toggle is the child of .dropdown so instead of next you can call find method:
$(document).ready(function() {
$('.dropdown').on('click', function() {
var $this = $(this)
$this.find('a.dropdown-toggle').attr('aria-expanded', 'true');
});
});
<li>
<a href="#">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Smartr Sites</span>
</a>
<ul class="sub">
<li>
<a href="tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Chicken Notes</span>
</a>
</li>
<li>
<a href="data-tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Purely Commerce</span>
</a>
</li>
</ul>
</li>
My Dashboard Submenu automatically expands without having a click on page load. and i only want to expand or close when i click it .
may be it can be done through JS tweak.
Okay thanks for helping out but i found a way to make this happen . I just put the id in dropdown menu and applied a JS function related to that id Here it is:
<li>
<a href="#"id="posuvnik">
<span class="icon"><i class="icon20 i-stack-list">
</i></span>
<span class="txt">Smartr Sites</span>
</a>
<ul class="sub">
<li>
<a href="tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Chicken Notes</span>
</a>
</li>
<li>
<a href="data-tables.html">
<span class="icon"><i class="icon20 i-stack-list"></i></span>
<span class="txt">Purely Commerce</span>
</a>
</li>
</ul>
</li>
</script>
$(document).ready(function () {
$("#posuvnik").click();
});
</script>
I want to test by clicking an element which is only visible when the sidebar section is scrolled. The sidebar is in the left end of the website and the element is in the bottom portion of the sidebar. I used:
browser.executeScript('window.sidebar.scrollTo(0,0);').then(function ()
but it's not working.
<div class="sidebar" data-active-color="white" data-background-color="red" data-image="../assets/img/sidebar-1.jpg">
<sidebar-cmp>
<div class="logo">
<div class="logo-normal">
<a class="simple-text" href="https://www.creative-tim.com">
Creative Tim
</a>
</div>
<div class="logo-img">
<img src="/assets/img/angular2-logo-white.png">
</div>
</div>
<div class="sidebar-wrapper">
<div class="user">
<div class="photo">
<img src="../assets/img/faces/avatar.jpg">
</div>
<div class="info">
<a class="collapsed" data-toggle="collapse" href="#collapseExample">
<span>
Tania Andrew
<b class="caret"></b>
</span>
</a>
<div class="collapse" id="collapseExample">
<ul class="nav">
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">MP</span>
<span class="sidebar-normal">My Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">EP</span>
<span class="sidebar-normal">Edit Profile</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span class="sidebar-mini">S</span>
<span class="sidebar-normal">Settings</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul class="nav">
<li routerlinkactive="active" class="active visible">
<a href="#/dashboard">
<i class="material-icons">dashboard</i>
<p>Dashboard</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#componentsExamples">
<i class="material-icons">apps</i>
<p>Components
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="componentsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/components/buttons">
<span class="sidebar-mini">B</span>
<span class="sidebar-normal">Buttons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/grid">
<span class="sidebar-mini">GS</span>
<span class="sidebar-normal">Grid System</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/panels">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Panels</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/sweet-alert">
<span class="sidebar-mini">SA</span>
<span class="sidebar-normal">Sweet Alert</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/notifications">
<span class="sidebar-mini">N</span>
<span class="sidebar-normal">Notifications</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/icons">
<span class="sidebar-mini">I</span>
<span class="sidebar-normal">Icons</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/components/typography">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Typography</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#formsExamples">
<i class="material-icons">content_paste</i>
<p>Forms
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="formsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/forms/regular">
<span class="sidebar-mini">RF</span>
<span class="sidebar-normal">Regular Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/extended">
<span class="sidebar-mini">EF</span>
<span class="sidebar-normal">Extended Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/validation">
<span class="sidebar-mini">VF</span>
<span class="sidebar-normal">Validation Forms</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/forms/wizard">
<span class="sidebar-mini">W</span>
<span class="sidebar-normal">Wizard</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#tablesExamples">
<i class="material-icons">grid_on</i>
<p>Tables
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="tablesExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/tables/regular">
<span class="sidebar-mini">RT</span>
<span class="sidebar-normal">Regular Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/extended">
<span class="sidebar-mini">ET</span>
<span class="sidebar-normal">Extended Tables</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/tables/datatables.net">
<span class="sidebar-mini">DT</span>
<span class="sidebar-normal">DataTables.net</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#mapsExamples">
<i class="material-icons">place</i>
<p>Maps
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="mapsExamples">
<ul class="nav">
<li routerlinkactive="active">
<a href="#/maps/google">
<span class="sidebar-mini">GM</span>
<span class="sidebar-normal">Google Maps</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/fullscreen">
<span class="sidebar-mini">FSM</span>
<span class="sidebar-normal">Full Screen Map</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/maps/vector">
<span class="sidebar-mini">VM</span>
<span class="sidebar-normal">Vector Map</span>
</a>
</li>
</ul>
</div>
</li>
<li routerlinkactive="active">
<a href="#/widgets">
<i class="material-icons">widgets</i>
<p>Widgets</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/charts">
<i class="material-icons">timeline</i>
<p>Charts</p>
</a>
</li>
<li routerlinkactive="active">
<a href="#/calendar">
<i class="material-icons">date_range</i>
<p>Calendar</p>
</a>
</li>
<li routerlinkactive="active">
<a data-toggle="collapse" href="#pagesExamples">
<i class="material-icons">image</i>
<p>Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="pagesExamples">
<ul class="nav">
<li>
<a href="./pricing.html">
<span class="sidebar-mini">P</span>
<span class="sidebar-normal">Pricing</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/timeline">
<span class="sidebar-mini">T</span>
<span class="sidebar-normal">Timeline Page</span>
</a>
</li>
<li>
<a href="./login.html">
<span class="sidebar-mini">LP</span>
<span class="sidebar-normal">Login Page</span>
</a>
</li>
<li>
<a href="./register.html">
<span class="sidebar-mini">RP</span>
<span class="sidebar-normal">Register Page</span>
</a>
</li>
<li>
<a href="./lock.html">
<span class="sidebar-mini">LSP</span>
<span class="sidebar-normal">Lock Screen Page</span>
</a>
</li>
<li routerlinkactive="active">
<a href="#/pages/user">
<span class="sidebar-mini">UP</span>
<span class="sidebar-normal">User Page</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="sidebar-moving-tab" style="transform: translate3d(0px, 5px, 0px);"></div></div>
</div>
</sidebar-cmp>
<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>
</div>
Specify the position at what location you have to scroll, try this one.
browser.executeScript('window.scrollTo(0,1000);').then(function () {
browser.sleep(5000);
console.log('Window ScrollTo','Done');
}).then(function() {
//wait for element to be displayed
browser.driver.wait(function(){
return someElement.isDisplayed().then(function (isVisible){
return isVisible === true;
},50000, 'Element not present ' );
},50000)
});
I've been using this line for scrolling.
You can also try it on console before using it on protractor.
e.g. $(".sidebar").scrollLeft(1000)
strPixels = 1000 //value in pixel
strClass = '.sidebar' //class of the element with scrollbar
browser.executeScript('$("' + strClass + '").scrollLeft(' + strPixels + ')');
Note: you can use scrollLeft or scrollTop to scroll horizontally or vertically.
var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();
I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">
I am trying to create fixed top navigation when scroll the window and from the point when top area becomes invisible. I did it but I have problem with body padding top when top area becomes visible again. Padding is added automatically to body, but should not, need only to be applied when navbar has an fixed-top class. See the picture (when top area becomes visible)
How to fix that problem with padding?
Site is live here
JavaScript
//FIXED NAVBAR ON SCROLL
$(document).scroll(function(event) {
var wintop = $(window).scrollTop(); // Winodw Scroll Positon
var topArea = $('.top-area').outerHeight(); // Header Logo Div Height
if (wintop > topArea) {
$('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
$('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height")) + 1);
} else {
$('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
}
});
I have bootstrap navigation (navbar navbar-default) which is below top-area on site, this is code
<div class="top-area">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<p class="address">Maršala Tita br. 54, Gložan 21412, Srbija</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 information text-right">
<ul class="contact">
<li class="email">support#uram.co.rs
</li>
<li class="telephone">+381 21 788 584</li>
<li class="fax">+381 21 788 584</li>
</ul>
<ul class="social">
<li>
<a href="http://www.facebook.com" target="_blank" title="Pratite nas na Facebook-u">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.plus.google.com" target="_blank" title="Pratite nas na Google plus">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.twitter.com" target="_blank" title="Pratite nas na Twitter-u">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.vimeo.com" target="_blank" title="Pratite nas na Vimeo">
<i class="fa fa-vimeo" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="http://www.youtube.com" target="_blank" title="Pratite nas na YouTube">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-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="http://mile.x3.rs/mile/uram/" title="Uram System - Dobrodošli">
<img src="http://mile.x3.rs/mile/uram/img/logo.jpg" alt="Uram System Logo">
</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<nav>
<ul class="nav navbar-nav">
<?php $currentPage=( basename($_SERVER[ "SCRIPT_NAME"])); ?>
<li <?php if ($currentPage=='index.php' ) { echo "class='active'"; } else {echo '';} ?>>Početna
</li>
<li class="dropdown">
O nama <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Naša kompanija
</li>
<li>Istorijat
</li>
<li>Nagrade i priznanja
</li>
<li>Rukovodstvo
</li>
</ul>
</li>
<li>Proizvodi
</li>
<li class="dropdown">
Reference <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Fabrika Knjaz Miloš, Aranđelovac
</li>
</ul>
</li>
<li class="dropdown">
Partneri <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Partner 1
</li>
<li>Partner 2
</li>
<li>Partner 3
</li>
<li>Partner 4
</li>
<li>Partner 5
</li>
<li>Partner 6
</li>
</ul>
</li>
<li <?php if ($currentPage=='novosti.php' ) { echo "class='active'"; } else {echo '';} ?>>Novosti
</li>
<li class="dropdown">
Download <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu" role="menu">
<li>Download 1
</li>
<li>Download 2
</li>
<li>Download 3
</li>
<li>Download 4
</li>
<li>Download 5
</li>
<li>Download 6
</li>
</ul>
</li>
<li <?php if ($currentPage=='kontakt.php' ) { echo "class='active'"; } else {echo '';} ?>>Kontakt
</li>
<li>
<a style="visibility: visible;" class="search-button" href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
</ul>
<!-- /.nav navbar-nav -->
<div style="display: none;" class="bg-white hide-show-content no-display header-search-content">
<form class="navbar-form vertically-absolute-middle">
<div class="form-group">
<input placeholder="Unesite pojam za pretragu ovde" class="form-control" id="s" name="s" value="" type="text">
</div>
</form>
<button class="close">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</nav>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar navbar-default navbar-fixed-top -->
Just remove the padding-top in the else statement :
$(document).scroll(function(event) {
var wintop = $(window).scrollTop(); // Winodw Scroll Positon
var topArea = $('.top-area').outerHeight(); // Header Logo Div Height
if (wintop > topArea) {
$('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
$('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height")) + 1);
} else {
$('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
$('body').css('padding-top', '0px');
}
});
Please try this:
$(document).scroll(function(event) {
var wintop = $(window).scrollTop(); // Winodw Scroll Positon
var topArea = $('.top-area').outerHeight(); // Header Logo Div Height
if(wintop > topArea){
$('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
$('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height"))-109);
} else {
$('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
}
});