Hi

 

I need some help with stopping a resizing nav bar on smaller screen when the website is responsive.

 

I have followed this tutorial to do the resizing nav bar which uses html5, css3 and javascript.

 

code can be found here ... http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/

 

live demo here ... http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-resizing-menu-bar/

 

As im doing a reponsive site how do it stop the action when it changes to a smaller screen css. I just want it to be a normal nav bar that doesn't resize he smaller screens.

 

hope that makes sense

 

thanks

They have this script using scrolltop.

<script type="text/javascript">
$(document).on("scroll",function(){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
});
</script>

Replace it with this

<script type="text/javascript">
$(document).on("scroll",function(){
  var windowWidth = $(window).width(),
      breakpoint = 700;
  if(windowWidth < breakpoint){
    if($(document).scrollTop()>100){
        $("header").removeClass("large").addClass("small");
    } else{
        $("header").removeClass("small").addClass("large");
    }
  }
});
</script>

Set the value of breakpoint to the window width that you want the shrinking behaviour to stop.

 

On a further not that script isn't really written with performance in mind, shouldn't really bind functions to window scroll events without some kind of throttling, the dom references should also be cached.

Thanks for your help. I'll give that a try!

 

Unfortunately I have no javascript knowledge so i wouldn't know how to improve its performance

Codeschool is a good place to learn

 

 

By the way I made an error in the if statement change the line

if(windowWidth < breakpoint){

to

if(windowWidth > breakpoint){

Edited February 13, 201511 yr by rbrtsmith

Thanks rbrtsmith! Worked a treat.

 

I had a brief try at learning javascript basics... i don't think my head can remember / understand it all! haha

 

My next javascript code is when i get to the mobile screen i need my nav menu list to turn into a menu symbol to show and hide the menu....

 

Does this look correct to you?

 

Javascript

        <script type="text/javascript">
      var originalNavClasses;

      function toggleNav() {
        var elem = document.getElementById('mobile-nav'),
            classes = elem.className,
            newClasses;

        if (originalNavClasses === undefined) { originalNavClasses = classes; }

        elem.className = /expanded/.test(classes) ?
                          originalNavClasses :
                          originalNavClasses + ' expanded';
      }
    </script>

HTML

            <div id="mobile-nav">
              <a href="#" class="menu-button" onClick="toggleNav(); return false;"></a>

			<ul>
				<li><a href="#">Restore</a></li>
				<li class="blue"><a href="#">Colour</a></li>
				<li class="green"><a href="#">Process</a></li>
                <li class="yellow"><a href="#">Contact</a></li>
			</ul>
            </div>