Add margin to the border-bottom of active nav- link without affecting the text

Question

I have been working on my Bootstrap Nav and kind of worked it out, but somehow struggling with this thing which to make the bottom border of the active link to take up the width of the text, not the container it is in. So for this came up with this idea to add some margin to the border-bottom of the active link. After numerous efforts, all I'm getting is the messed up UI. I need your help guys, would be great to learn something today.

CODE

Trying to add the code snippet but the Bootstrap nav is not working fine.

HTML



  
  
  
  

  
      
  
  

     
     
       
         HOME
         
         
         
         
            SECOND PAGE
            THIRD PAGE
        
       
      
    

    
      
        Bringing ease to
each home
        
      
    

   
      
        Second Page
        
      
   

   
     
        Third Page

CSS

.navbar {
   top: 0px;
   width: 100%;
   z-index: 999;
   display: block;
   padding: 20px !important;
   position: fixed!important;
   -webkit-backface-visibility: hidden
 }

 .navbar-nav a {line-height: normal}
 .home-page H1 {padding-top: 219px;color: #616161}
 .active {color: grey!important; border-bottom: 5px solid #8ABE25}

JAVASCRIPT FOR ACTIVE LINK

$(document).ready(function () {
  $('.navbar div a').click(function(event){
    //remove all pre-existing active classes
    $('.active').removeClass('active');

    //add the active class to the link we clicked
    $(this).addClass('active');
  });
});

What I have tried from this this is this :

.active { 
  position: fixed!important;
  content: '';
  border-bottom: 1px solid #d2d7da;
  width: 70%;
  transform: translateX(-50%);
  bottom: -15px;
  left: 50%;
}

Messed up my UI. Also tried box-sizing: border-box but didn't work out in my case.

RESULT I want is like this :

This is my JsFiddle link : JsFiddle Result If the nav bar doesn't open up kindly expand the result so that you can see the other option, don't know why the JsFiddle is behaving weird. Any help would be appreciated.

patelarpan · Accepted Answer

$(document).ready(function () {
$('.navbar div a').click(function(event){
        //remove all pre-existing active classes
        $('.active').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');
    });
});

.navbar {
  top: 0px;
  width: 100%;
  z-index: 999;
  display: block;
  padding: 20px !important;
  position: fixed!important;
  -webkit-backface-visibility: hidden
}

.navbar-nav a {line-height: normal}
.home-page H1 {padding-top: 219px;color: #616161}
.active span {color: grey!important; position: relative; display: inline-block;}

.active span:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height: 5px;
    background-color: #8ABE25;
}




  
    
    
    

    
        
  
  
  
    
    
      
        
          HOME
        
        
        
        
          
            SECOND PAGE INFORMATION
            THIRD PAGE
            FOURTH PAGE
            FIFTH PAGE
            SIXTH PAGE
          
        
      
    
    
    
      
        Bringing ease to
each home
        
      
    
    
    
      
        Second Page
        
      
    
    
    
      
        Third Page

wrap your text with span and giving the following style.

.active span {color: grey!important; position: relative; display: inline-block;}

.active span:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height: 5px;
    background-color: #8ABE25;
}

Add margin to the border-bottom of active nav- link without affecting the text

Answers (1)

Related Questions