<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div data-spy="affix" id="dot-nav"> <ul> <li class="awesome-tooltip active" title="Home"><a href="#home"></a></li> <li class="awesome-tooltip" title="About"><a href="#about"></a></li> <li class="awesome-tooltip" title="Projects"><a href="#projects"></a></li> <li class="awesome-tooltip" title="Contact"><a href="#contact"></a></li> </ul> </div>

body { background: #f0f0f0; } body, html { height: 100%; } #main { height: 100%; } section { padding: 13% 0; height: 100%; } #dot-nav{ right: 10px; top: 50%; margin-top: -50px; height: 100px; z-index: 999; } #dot-nav ul { list-style: none; margin:0; padding: 0; } #dot-nav li { position: relative; background-color: #bdc3c7; border:3px solid #bdc3c7; border-radius: 15px 15px 15px 15px; cursor: pointer; padding: 5px; height: 10px; margin: 10px 10px 0px 0px; width: 10px; vertical-align:bottom; } #dot-nav li.active, #dot-nav li:hover { background-color: #8e44ad; } #dot-nav a { outline: 0; vertical-align:top; margin: 0px 0px 0px 25px; position: relative; top:-5px; } .awesome-tooltip + .tooltip > .tooltip-inner { background-color: #8e44ad; color: #f5f5f5; border: 1px solid #8e44ad; } .awesome-tooltip + .tooltip.left > .tooltip-arrow{ top:50%; right:0; margin-top:-5px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #8e44ad; }