html - Bootstrap Scrolling Nav: fix sections height and active menu highlight -


  1. when click <a> link in navigation anchor point looks wrong, because can't see section headline. <h2> in case.
  2. is possible highlight <a> link? border or smething this...

this html code:

<!-- fixed navbar --> <nav id="navbar" class="navbar navbar-default">   <div class="container">     <div class="navbar-header">       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">         <span class="sr-only">toggle navigation</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>     </div>     <div id="navbar" class="navbar-collapse collapse">       <ul class="nav navbar-nav">         <li class="page-scroll"><a href="#">home</a></li>         <li><a class="page-scroll" href="#ark">architektur</a></li>         <li><a class="page-scroll" href="#">wohnen</a></li>         <li><a class="page-scroll" href="#ausstattung">ausstattung</a></li>         <li><a class="page-scroll" href="#lage">lage</a></li>         <li><a class="page-scroll" href="#">galerie</a></li>         <li><a class="page-scroll" href="#kontakt">kontakt</a></li>           </ul>     </div><!--/.nav-collapse -->   </div> </nav> <!-- === end nav === --> 

edit:

nav problem

i don't know mean in first problem highlighting <a></a> here code:

html

<nav>   <ul>     <li><a href="#">home</a></li>     <li><a href="#">about</a></li>     <li><a href="#">clients</a></li>     <li><a href="#">contact us</a></li>   </ul> </nav> 

css

li{   padding: 8px; }  a{   text-decoration: none;   color: #000; }  a:hover, a:focus{   color: red;   text-decoration: none;   outline: none; }  .active{   font-size: 30px;   color: red;   border-bottom: 5px solid red; } 

jquery

    $(document).ready(function(){     $('a').click(function(){         $('a').removeclass("active");         $(this).addclass("active");     });   }); 

working fiddle:

jsfiddle


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -