I have an issue with my navbar on bootstrap 3. When adding an iframe onto the page it won't expand and I cannot navigate (on small screens). Maximizing the window (big screens) however shows, that the navbar is there and all items are available and clickable.

Without the iframe, everything works as expected. Can anyone imagine, why? This seems rather strange to me...

I'd appreciate any pointers.

Cheers :-)

Edit: Some code. Don't get confused by the django code fragements inside the html. They are working fine.

Edit2: I also noticed now my footer isn't showing on that same page containing the iframe. menting out the iframe and everything works. Why would that be? Noone?

iframe:

<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"/>                                                                                          
</div>

navbar:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.html">Camerata Serena</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                {% for page in page_list %}
                    {% if page.titel != 'Kasse' %}
                        <li><a href="generic_page.html?index={{ page.page_index }}">{{ page.titel }}</a></li>
                    {% endif %}
                {% endfor %} 
                <li><a href="admin/">Intern</a></li>                    
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

I have an issue with my navbar on bootstrap 3. When adding an iframe onto the page it won't expand and I cannot navigate (on small screens). Maximizing the window (big screens) however shows, that the navbar is there and all items are available and clickable.

Without the iframe, everything works as expected. Can anyone imagine, why? This seems rather strange to me...

I'd appreciate any pointers.

Cheers :-)

Edit: Some code. Don't get confused by the django code fragements inside the html. They are working fine.

Edit2: I also noticed now my footer isn't showing on that same page containing the iframe. menting out the iframe and everything works. Why would that be? Noone?

iframe:

<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"/>                                                                                          
</div>

navbar:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.html">Camerata Serena</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav navbar-right">
                {% for page in page_list %}
                    {% if page.titel != 'Kasse' %}
                        <li><a href="generic_page.html?index={{ page.page_index }}">{{ page.titel }}</a></li>
                    {% endif %}
                {% endfor %} 
                <li><a href="admin/">Intern</a></li>                    
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

• javascript
• css
• twitter-bootstrap
• iframe
• navbar

• Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example. – Aibrean Commented Sep 16, 2014 at 12:41
• Thank you for your suggestion. I added the specific code section causing the problem, which is just an iframe. The issue however has nothing to do with that and concerns the navbar of bootstrap which definition I also added. Thanks again – EvilSmurf Commented Sep 16, 2014 at 13:14

1 Answer 1

I found the issue.

One has to use

<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"></iframe>                                                                                          
</div>

with the plete closing statement. It's not enough to use

<div class="col-md-4">                                                              
  <iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"/>                                                                                          
</div>