bootstrap fixed navbar covers the whole screen when zooming in

Question

A bit silly yet slightly concerning problem. I have navbar fixed to the top with some elements inside. The problem is that if I zoom in with high percentage, elements in the navbar regroups so that whole screen is covered by the navbar. That would be allright if the topbar would not stay fixed rendering the whole page useless. Is there a way to "unfix" it after some zooming level is reached? (Ye and I am css noob). Here is markup of the navbar:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="brand" href="{% url home %}">Pavel Nováček</a>
            <ul class="nav">
                {% load tag_library %}
                {% set_current_urlname %}
                <li><a href="{% url home %}" class=""><img src="/static/web/img/cz.png"></a></li>
                <li><a href="{% url home %}" class="" style="padding-left: 0px"><img src="/static/web/img/gb.png"></a></li>

                <li class="{% if current_urlname == 'home' %}active{% endif %}">
                <a href="{% url home %}"><strong>Home</strong></a>
                </li>
                <li class="{% if current_urlname == 'about-me' %}active{% endif %}">
                <a href="{% url about-me %}"><strong>About me</strong></a>
                </li>
                <li class="{% if current_urlname == 'books' %}active{% endif %}">
                <a href="{% url books %}"><strong>Books</strong></a>
                </li>
                <li class="{% if current_urlname == 'presentations' %}active{% endif %}">
                <a href="{% url presentations %}"><strong>Presentations</strong></a>
                </li>
                <li class="{% if current_urlname == 'links' %}active{% endif %}">
                <a href="{% url links %}"><strong>Links</strong></a>
                </li>
                <li class="{% if current_urlname == 'contact' %}active{% endif %}">
                <a href="{% url contact %}"><strong>Contact</strong></a>
                </li>
            </ul>

        </div>
    </div>
</div>

EDIT: it seems to be "a feature" of container-fluid.

score 0 · Answer 1 · answered Feb 28 '13 at 13:56

Set the meta viewport to be mobile friendly in the head of your document.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Then use media queries e.g.

@media all and (max-width: 699px) {

.navbar {

display:none;

}

}

I will take some messing around with but your probably best unfixing the navigation and replacing in with a mobile friendly one.

bootstrap fixed navbar covers the whole screen when zooming in

1 Answers1