Nav bar scrolling when should be at top

Design help General
1

For some reason, once I added the following HTML code from Whova on the page, it made the nav bar scroll:

<div><div title="Whova event and conference app" id="whova-exhibitorwidget"><p id="whova-loading">Loading...</p></div><script src="https://whova.com/static/xems/js/embed/whova-exhibitor-widget.js?eid=tmcca_201811&host=https://whova.com" type="text/javascript" id="embeded-exhibitor-script"></script><div id="whova-wrap">Powered By <a class="brandlink" target="_blank" href="https://www.whova.com"><b>Whova - Best Event App</b></a><div id="whova-mgm"><a href="https://whova.com/whova-event-app/" id="whova-emslink" target="_blank">Whova event and conference app</a></div></div></div>

What portion of this code to I need to alter or what do I need to do in order to get the nav bar to function properly? It only happens on this page. The rest are fine.

49%20PM
49%20PM2336×1404 261 KB

Here is my site Read-Only: Webflow - Texas Covered Conference
Here is the live page: TAHP Texas Covered Conference + Expo⎪2018 Sponsors

2

js issue

If i turn off javascript its works fine (Try with this tool - disable-javascript). Why? It’s hard to know (You use a lot of assets).

Anyway add this custom code (before head for this specific page) - should fix weird issue:

<style>
   body.body{
         overflow: visible!important;
   } 
</style>

visible = deafult value

And we override this inline style

image
image802×106 15.1 KB

3

@Siton_Systems Genius! Thank you so much. This did the trick.

1 Like
4

Mark as solution to close this topic. Thanks

5 
$(document).ready(function() {
  
  $(window).scroll(function () {
      //if you hard code, then use console [Showbox App](https://show-box.pro/)
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

html, body {
	height: 4000px;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

#body_div {
	top: 0;
	position: relative;
    height: 200px;
    background-color: green;
}

#banner {
	width: 100%;
	height: 273px;
    background-color: gray;
	overflow: hidden;
}

#nav_bar {
	border: 0;
	background-color: #202020;
	border-radius: 0px;
	margin-bottom: 0;
    height: 30px;
}

.nav_links {
    margin: 0;
}

.nav_links li {
	display: inline-block;
    margin-top: 4px;
}
.nav_links li a {
	padding: 0 15.5px;
	color: #3498db;
	text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
     <h2>put what you want here</h2>
     <p>just adjust javascript size to match this window</p>
  </div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Nav Bar</a></li>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>
<div id='body_div'>
    <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
6

$(document).ready(function() {

$(window).scroll(function () {
//if you hard code, then use console showbox app
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
$(‘#nav_bar’).addClass(‘navbar-fixed’);
}
if ($(window).scrollTop() < 281) {
$(‘#nav_bar’).removeClass(‘navbar-fixed’);
}
});
});
html, body {
height: 4000px;
}

.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}

#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}

#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}

#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}

.nav_links {
margin: 0;
}

.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}

put what you want here

just adjust javascript size to match this window

and more stuff to continue scrolling here