bootstrap navbar overlap content on small screen size

Question

Hi I am using bootstrap with two different navbars, one for big screens and one for phone-sized screens.

Code for both navbars:

<!-- navbar -->
<div class="hidden-xs">
    <div class="container">
        <div class="navbar navbar-fixed-top {:inverse}" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <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 class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/" style="padding-top: 0px; padding-bottom: 0px;"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/donate/">Donate</a></li>
                    <li><a href="/sales/">Sales</a></li>
                    <li><a href="/contact-us/">Submit Tip</a></li>
                    <li><a href="/crowdfunding/">Wiki</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forum <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="/forum/">Forum</a></li>
                            <li><a href="/community/">Community Page</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> {:username} <b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            {:user_menu}
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
                    <input type="hidden" name="module" value="search">
                    <input type="text" class="form-control" name="q" placeholder="Search Articles">
                    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
                </form></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- navbar phone screens -->
<div class="visible-xs">
    <div class="container">
        <div class="navbar navbar-fixed-top {:inverse}" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><form method="get" action="/index.php?module=search" class="navbar-form" role="search">
                        <input type="hidden" name="module" value="search">
                        <input type="text" class="form-control" name="q" placeholder="Search Articles">
                        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
                        </form>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        {:user_menu}
                    </ul>
                </li>
            </ul>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/"><img src="/templates/default/images/navbar_logo_{:theme}.png" alt="GamingOnLinux" /></a>
              </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/donate/">Donate</a></li>
                    <li><a href="/sales/">Sales</a></li>
                    <li><a href="/contact-us/">Submit Tip</a></li>
                    <li><a href="/crowdfunding/">Wiki</a></li>
                    <li><a href="/forum/">Forum</a></li>
                    <li><a href="/community/">Community Page</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="contentwrap">
    <div class="container">
        <div class="add-bottom-margin">
            <!-- image carousel -->
            <div class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                 <div class="carousel-inner">
                    {:carousel_list}
                </div>
                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div><!-- /.carousel -->
        </div>

Then this JS code is used to calculate the correct position for "contentwrap" to make sure it sits directly after the navbar, and it works on our normal navbar, but not on the small screen navbar oddly:

jQuery(document).ready(function() {
            $('.contentwrap').css({
                'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px'
            });
            $(window).resize(function() {
                $('.contentwrap').css({
                    'margin-top': (($('.navbar-fixed-top').height()) + 1) + 'px'
                });
            });
});

Am I missing something obvious as to why it doesn't work on the visible-xs navbar?

For reference the JS code came from this post twitter bootstrap navbar fixed top overlapping site and a few people use it.

score 3 · Answer 1 · answered Oct 02 '14 at 10:21

I managed to fixed it thanks to a comment from "tmg"

I gave each navbar an id, and then just added them together, it's very simple and it works perfectly.

$('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1 )+'px'});
$(window).resize(function()
{
        $('.contentwrap') .css({'margin-top': (($('#nav-small').height() + $('#nav-normal').height()) + 1 )+'px'});
});

tmg · Answer 2 · 2014-10-02T10:18:58.913

0

$('.navbar-fixed-top').height()

you have 2 elements with this class. Above code calculates the height of first element which equals to zero in same screen case

Calculate the summary of heights of elements

var calcHeights = function (elements) {
            var r = 0;
            elements.each(function () {
                r += $(this).height();
            });
            return r;
        }

instead of $('.navbar-fixed-top').height() use calcHeights($('.navbar-fixed-top'))

edited Oct 02 '14 at 10:18

answered Oct 02 '14 at 10:04

tmg

19,895
5
72
76

Yeah i just realised that might be the issue, what's a good way around it? – NaughtySquid Oct 02 '14 at 10:06
1

just add their heights and use the summary. – tmg Oct 02 '14 at 10:11
I had a tinker and that worked, I just gave them each a different id and added them together! :D Thanks a lot! – NaughtySquid Oct 02 '14 at 10:18
I added my own answer which is simpler and uses less JS, but your comment got me there thank you! – NaughtySquid Oct 02 '14 at 10:22

score 0 · Answer 3 · answered Oct 02 '14 at 10:09

0

Suggestions that don't require any jQuery glue:

Change navbar-fixed-top to navbar-top and don't place the navbars in a .container.
Then the content should start after the navbar. (Adjust the navbar and content margins accordingly)

answered Oct 02 '14 at 10:09

fhollste

785
6
16

Like I said to the other guy who deleted his answer, changing navbar type is not a solution. – NaughtySquid Oct 02 '14 at 10:10
2

And why is that? You can't access the html? You are now practically changing your bootstrap declarations with jquery... – fhollste Oct 02 '14 at 10:18
Maybe I want to use the navbar type that I am happy with? – NaughtySquid Oct 02 '14 at 10:43
1

Well, you are clearly not happy, since you have a problem. "Fixed" makes the content begin from the window top and not after the navbar. You don't have to change the "type", you're just changing the position declaration. – fhollste Oct 02 '14 at 11:02

bootstrap navbar overlap content on small screen size

3 Answers3