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

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5); ...
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:...
Read more