CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
NaughtySquid
NaughtySquid

Reputation: 2097

bootstrap navbar overlap content on small screen size

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

Url: http://www.gamingonlinux.com/

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.

Upvotes: 4

Views: 3956

Answers (3)

NaughtySquid
NaughtySquid

Reputation: 2097

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'});
});

Upvotes: 3

tmg
tmg

Reputation: 20393

$('.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'))

Upvotes: 0

fhollste
fhollste

Reputation: 795

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)

Upvotes: 0

Related Questions