Hello guys!

I have a problem with my website template.. I don't know how to activate the navbar.. I mean when I click on "Home" the button should be active but it's not.. I think I need a script .. Could you help me please ?!

<div class="IsmaelHeaderBtm">
	<nav>
		<li><a href="#Home">Home</a></li>
		<li><a href="#Works">Works</a></li>
		<li><a href="#Services">Services</a></li>
		<li><a href="#ContactMe">Contact me</a></li>
		<li><a href="#AboutMe">About me</a></li>				
		<div class="clr"></div>			
	</nav>
</div>
			

.IsmaelHeaderBtm  {
	position:fixed;
	display:block;
	top:0;
	width:100%;
	background:#5987D2;
}
.IsmaelHeaderBtm nav {
}
.IsmaelHeaderBtm nav li{	
	float:left;	
}
.IsmaelHeaderBtm nav li{
	
}
.IsmaelHeaderBtm nav li a{
	display:block;
	padding:5px 15px;
	margin-right:15px;
	margin-left:15px;
	color:#ddd;
	font-size:20px;
	font-family:"puertoHelve", tahoma;
}
.IsmaelHeaderBtm nav li a:hover{
	color:#fff;
	height:25px;
	border-bottom:3px solid #ddd;
	padding-bottom:12px;
}

.IsmaelHeaderBtm nav li a.active {
	color:#fff;
	height:25px;
	border-bottom:3px solid #ddd;
	padding-bottom:12px;
}

 

You have class active in your CSS, but not in your HTML.

Add the class to the link you want active, for example:

 

<li><a class="active" href="#Home">Home</a></li> 

Are these tabs or are they going to be link to pages?

 

*Welcome to the forum

Edited July 17, 201313 yr by teodora

You have class active in your CSS, but not in your HTML.

Add the class to the link you want active, for example:

 

<li><a class="active" href="#Home">Home</a></li> 

Are these tabs or are they going to be link to pages?

 

*Welcome to the forum

Thank You, I did it in HTML, but it doesn't work, I want them all can be active.. exemple: when I click on "Home" I want it to be active, & when I click on "Contactus" I want it active.. etc..

I assume they are going to be tabs then

 

If you have jquery loaded look here: link

If not, here is a solution using row javascript: link

 

Edit: Changed one of the links to an easier looking solution.

Edited July 17, 201313 yr by teodora

When the links are clicked are you scrolling the current page or linking to a new page ?

 

 

.IsmaelHeaderBtm nav li a.active {    /*     should be .IsmaelHeaderBtm nav li a:active{   a( not a(.) */
    color:#fff;
    height:25px;
    border-bottom:3px solid #ddd;
    padding-bottom:12px;
}
 

 

another thing I noticed is that you have the same color #FFF and #DDD for all of you links. There really wont be any noticeable difference in the visuality (if that's a word ) of it because of that as well

Edited July 18, 201313 yr by drt_t1gg3r

When the links are clicked are you scrolling the current page or linking to a new page ?

 

I am scrolling the current page .. that's why I thought that I need a javascript..

another thing I noticed is that you have the same color #FFF and #DDD for all of you links. There really wont be any noticeable difference in the visuality (if that's a word ) of it because of that as well

I did it.. but I doesnt works :s Anyway .. here is the website that I am working on it.. http://bit.ly/12AmHty .. Thank you (y) =D

 

.IsmaelNavbar nav ul li a{
    display:block;
    padding:8px 15px 10px 15px;
    margin-right:15px;
    margin-left:5px;
    color:#ddd;
    font-size:20px;
    font-family:"puertokhalidMy", tahoma;
}
.IsmaelNavbar nav ul li a:hover{
    color:#fff;
    height:20px;
    border-bottom:4px solid #fff;
    padding-bottom:12px;
}
.IsmaelNavbar nav ul li a:active{ /* see here? this is where you would change something for active */
    border-bottom:4px solid #fff; /* the color is the same as the hover and normal so you wont see anything different */
    
    /* If you would like to see a change here so you know it works try changing the color to something else */
    color:#F0F0F0; /* this will show you something here */
}

If you are trying more for a 'tab' style where the link changes color and stays that way while the user is on the page then you will have to use some sort of identifier on each page to represent which link is currently being viewed

 

class="selected" /* adding this to the li element can help keep track of it. */

Now you would only add this to the link(or I mean li element) on each page that the link corresponds to ( you would not use it on the home link if you are on the aboutme page but on the aboutme link )

<li class="selected"></li>

you can style the class by

.selected{

background-color:#DDD;

}

and when the user is on the page with the link that has the selected class applied to it that tab should have a different color

 

 

EDIT: sorry for typos

Edited July 20, 201313 yr by drt_t1gg3r

I think this what you are after

 

css change to add a .current rule

 

.IsmaelNavbar nav ul li a:hover,.IsmaelNavbar nav ul li a.current{
	color:#fff;
	height:20px;
	border-bottom:4px solid #fff;
	padding-bottom:12px;
} 

SmoothScroll edited to add class on click

 

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
		  //removes current class
		  $('a.current').removeClass('current');
		  //adds current class to clicked
		  $(this).addClass('current');
		  $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

}); 

Hth

Don't for get your ul tag. The nav tag doesn't replace it

I think this what you are after

 

css change to add a .current rule

 

.IsmaelNavbar nav ul li a:hover,.IsmaelNavbar nav ul li a.current{
	color:#fff;
	height:20px;
	border-bottom:4px solid #fff;
	padding-bottom:12px;
} 

SmoothScroll edited to add class on click

 

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
		  //removes current class
		  $('a.current').removeClass('current');
		  //adds current class to clicked
		  $(this).addClass('current');
		  $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

}); 

Hth

It works =D Thank you thank you so much brother (y) =)