How to add a floating menu in a Weebly website

Do you like those slick floating menus that follow you as you scroll down on the website? Me too. If you're using a standard top menu Weebly template, now you can add one yourself.

Sure, some of the new Weebly templates already have this feature, but if you already made a bunch of customizations on your own website, it's understandable that you don't want to change the whole template and start from scratch...

Well, now there is no need to change the whole template. Here is the step-by-step procedure on how to add a floating menu in your existing Weebly website:

Click this link if you want to watch the video directly on YouTube

 https://www.youtube.com/watch?v=3DOPTwvudoY

Here are the codes that are mentioned in the video, that you will need to copy & paste:

The Navigation code:

/* Navigation
--------------------------------------------------------------------------------*/

#nav {
 clear: both;
 overflow: hidden;
 position: relative;
}

#nav ul {
 list-style: none;
 text-align:center;
 margin-bottom:25px;
}

#nav ul li {
 list-style: none;
 display:inline-block;
 margin:0px 21px;
}

#nav ul span:last-child li,
#nav ul > li:last-child {
 background: none;
}

#nav ul li a {
 display: block;
 color: #111111;
 padding: 0px;
 border: 1px flashed;
 outline: 0;
 list-style-type: none;
 font-size: 23px;
 font-weight: bold;
}

#nav ul li#active a,
#nav ul li a:hover {
 color: #000000;
 border: 0;
}

/* Navigation Submenu's
--------------------------------------------------------------------------------*/

#wsite-menus .wsite-menu li a {
 font-family: 'Arial', sans-serif;
 font-size:14px;
 font-weight: regular;
 color: #111111;
 background: #fff;
 border: 1px rgba(0,0,0,.2);
 border-style: solid none none none;
 text-transform:none;
}

#wsite-menus .wsite-menu li a:hover {
 color: #000000;
 background: #f0f0f0;
}

#wsite-menus .wsite-menu-arrow {
    display: none;
}

The Header code:

/* Header
--------------------------------------------------------------------------------*/

#header-wrap {
 background: #fff url(top-bar-bg.jpg) repeat-x;
 min-width:960px;
 text-align:center;
 overflow:hidden;
 box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
 z-index: 20 !important;
}

#logo,
#logo a {
 font-family: 'Arial', sans-serif;
 font-size:50px;
 font-weight:700;
 line-height:1px;
 color:#415161;
 text-transform:uppercase;
 text-decoration:none;
 letter-spacing:-1px;
 margin:1px 0px 22px;
 border:none;
}

The Menu Template Code:

      <div id="logo">{logo}</div>
      <div id="nav">{menu}</div>

The JavaScript code:

<!-- JavaScript -->
 <script type="text/javascript" src="/files/theme/jquery.jqtransform.js" ></script>
 <script language="javascript">
  jQuery(function() {
   var $ = jQuery;
   $('#main-wrap .wsite-form-radio-container').jqTransform();
   var navPosition = $('#nav').offset().top - 15;
   $(window).scroll(function(e) {
    if ( $(window).scrollTop() > navPosition) {
     $('#main-wrap').css({'margin-top': $('#header-wrap').outerHeight() + 'px'});
     $('#header-wrap').css({'position': 'fixed', 'top': (-navPosition) + 'px', 'z-index': '1'});
    } else {
     $('#header-wrap').css({'position': 'static'});
     $('#main-wrap').css({'margin-top': '0px'});
    }
   });
  });
 </script>

Click here to download the jquery.jqtransform.js

If you prefer, you can click here and download all the codes: Navigation,  Header, Menu Template, JavaScript code and jquery.jqtransform.js in one zip file.


P.S. If you need any help setting up the floating menu on your Weebly site, please feel free to contact me via email.



Credit goes to Mathieu Vilaplana and Ghyslain Armand for the jquery.jqtransform.js and to Weebly for the floating menu codes. None of them are associated with this website.