CODEWITHSUNDEEP
javascripthtmlcssnavbar
JaredCubilla
JaredCubilla

Reputation: 598

Navbar hiding text after clicking on anchor link

I've recently been using Twitter Bootstrap, and I've been loving it.

I've created a navbar that is fixed to the top, and inside it is my logo, a header, a few links, and a dropdown that says "Jump to:". Upon clicking on the dropdown, a menu comes down with four links to a section within the page. All of the links work.

My problem is that because the header of each section is now placed at the top of my page, my fixed navbar blocks it. Is there anyway I can stop this from happening? A bit of jQuery or something?

This is my website: fishyfishy2014.gweb.io. Thanks in advance.

Upvotes: 5

Views: 4580

Answers (5)

Soufian
Soufian

Reputation: 161

In CSS, there is also the scroll-margin-top property that sets the element's scroll margin to the top side. You need to apply to anchored element a class, for exemple .anchor After that, you can apply this :

.anchor {
    scroll-margin-top: 77px;
}

Upvotes: 3

afilina
afilina

Reputation: 938

The following works without any JS:

a:not([href]):before {
    display: block;
    content: "";
    height: 60px;
    margin: -60px 0 0;
}

a:not([href]) assumes that your anchors don't have a href attribute. Change both occurrences of 60px to a value of your choice.

Upvotes: 1

2ndkauboy
2ndkauboy

Reputation: 9377

I think you are asking about an anchor jump, which will place the matching anchor to the top of the viewport and "under" the fixed nav. I had a similar issue and used this code:

/* fixing anchor jumps */

var nav_height = 77; // pixels

$(window).bind('hashchange', function(e){
    if($(location.hash).hasClass('anchor')){
        scrollBy(0, nav_height);
    }
    return false;
});
$(document).ready(function(){
    if($(location.hash).hasClass('anchor')){
        $('html,body').animate({
            scrollTop: $(location.hash).offset().top - nav_height - 10
        }, 10 );
    }
});

You just have to add the anchor CSS class to any element, you want be able to jump to.

Upvotes: 3

avb
avb

Reputation: 46

Actually, 2ndkauboy's solution does work. In short:

  1. get rid of the 'px' in nav_height variable (...as you said)

  2. use the anchor css class (...as 2ndkauboy said) but DONOT use it on the <a> tag but on the <div>, as follows:

    <a href="#jump_here">click here</a> ... other code here ... <div id="jump_here" class="anchor"> ... content ... </div>

Hope it helps.

Upvotes: 0

lozadaOmr
lozadaOmr

Reputation: 2655

You need to set this:

body { padding-top: 70px; }

This is coming from the Bootstrap docs itself

Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

You can check here

Upvotes: 1

Related Questions