We Keep Coding

Why is the <nav> Navbar element placed outside a container?

I'm curious if anyone knows why the semantic Navbar <nav> element is housed outside the outer <div class="container"> ?
From the Bootstrap Navbar docs:
https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<span class="sr-only">Toggle navigation</span>
My understanding (I thought) was that, in order for Bootstrap to, erm, bootstrap, everything had to be in a container > row > col.
Having used it a bit now, I understand there are caveats and "it's not always that simple" so I'm trying to faithfully perform the ball-achingly tedious work involved in digging into my app's front-end, while also understanding what I'm doing.
Is the answer just as simple as (my guess), <nav> is a "special" element created to live "outside" normal containers due to their special use case (particularly in the case of site/app-wide navigation)?
Steps taken on my own:
Reviewed 10+ "Similar questions"
Spent time on getbootstrap.com
Checked w3schools
Googled "<nav>"

“My understanding (I thought) was that, in order for Bootstrap to, erm, bootstrap, everything had to be in a container > row > col” - for the bootstrap grid system to work - yes. But a navigation is usually not using the grid system to begin with; mostly you have a navigation that is independent from the grid, followed by the main page content that might be using the grid. – CBroe 1 min ago
This answered my question. Thanks.

This enables the navbar to stretch to full width - the .container within it constrains the nav elements themselves. Look at [https://getbootstrap.com/examples/theme/] you'll see the dark navbar strip is full-width.
There's nothing stopping you from making multiple full-width sections each with their own .container div inside. See [https://getbootstrap.com/examples/jumbotron/] for an example - the .jumbotron also has a child .container but the background stretches to full width.
Also, there is nothing special about a .navbar element that means it must sit outside the container, as this example shows: [https://getbootstrap.com/examples/carousel/].
So use a container where you want to set max width and make sure the grid system works.

Images loading with wrong width angular

<div class="list" ng-controller="ListController">
<div class="list-item list-item-flex" ng-repeat="collaborator in collaboratorList">
<div class="list-left list-left-flex">
<img ng-src="images/{{collaborator.imgUrl}}" width="190px" height="190px"/>
<div class="padded-text">
<h1 class="collab">{{collaborator.name}}</h1>
<p>{{collaborator.info}}</p>
</div>
</div>
<div class="list-right list-right-flex">
<a class="mail" href="mailto:{{collaborator.email}}"> {{collaborator.email}}</a>
</div>
</div>
This is my template for previewing collaborators with their images and info. Every time I close the browser and start it again, upon loading this template the height is normal, but the width of the images is 50.466px even though I've set the width both inline and in CSS. If I resize the window or refresh it they go back to the desired width of 190px. It would be great if someone can help me figure out why this happens.
Edit: This does not seem to happen in Firefox, it does in chrome and IE.
Edit2: I have finally found the solution. My it was a flex-box issue, I have made the image align to the left and the text to the right and all works fine now.

Flexslider z-index fails navigation

I have Flexslider working nicely. However, I needed it to slide under a navigation bar so set it's margin-top to -75px and it's div.flexslider z-index to -2. Looks great but now the next/prev arrows don't fly in and the click navigation doesn't work. It's just an automatic slide show right now. If I remove the z-index setting, it works but shows over the top of the nav bar.
It's sitting in a site using bootstrap 3 :-
<div class="row">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/garden.jpg" />
</li>
<li>
<img src="images/house.jpg" />
</li>
</ul>
</div>
</div>
In Chrome there are no errors thrown in the dev tools. In Firefox, the slider disappears altogether unless the browser window is reduced in size.
What else do I need to adjust to allow the prev/next and slide navigation to work with the z-index set or is there another way?

The answer turned out to be removing the z-index:-2 on the flexslider. Then to push the nav over the top of it, had to add position:relative AND z-index:10. So the position:relative was the key to the solution.
Hope this helps someone else.
Craig

CSS3 Transitions: replace them entirely on mobile?

I am building a responsive web site and would like to use this effect for desktop versions only (where the screen is big enough).
The code looks like this:
<div class="block_holder">
<div class="hover_block block_4">
<img src="images/thumbnail.png" />
<div class="top_half">Top Div that slides down on hover</div>
<div class="bottom_half">Bottom Div that slides up on hover</div>
<div class="hover_info">Caption text content</div>
</div>
</div>
Transitions take place in these classes: .block_4 .top_half .block_4 .bottom_half and all content in .hover_info to produce the hover effect.
For mobile, I would just like the photo to just be clickable, without any transitions since there is no hover. Is there a way to replace the entire block of code with something like this:
<p>
<a id="fancybox-manual-b" href="javascript:;" class="link"><img src="images/patterns_thumb.png" alt="pattern" class="portfolio"/></a>
Patterns made in Adobe Illustrator
</p>
I've tried setting .top_half .bottom_half and .hover_info to "display: none;" in the #media section designated for mobile and tablet and then making the img a link, but the image is not clickable using the first code provided. Why is this?
I apologize if there is an obvious solution for this, I have not found or thought of any.

You might be better off using modernizer for this.
if ( Modernizr.touch ) {
$('.top_half,.bottom_half,.hover_info').hide();
$('.hover_block img').click(function() {
alert('I was clicked');
}).css('cursor','pointer');
}
Here is a fiddle to demonstrate the functionality. http://jsfiddle.net/LHLHG/

nav going below content on browser resize

I have a strange problem I can't figure out. I'm developing some navigation (that is responsive) independent from the rest of my site, and all is going well, except for one thing. If you load the page at a normal desktop size, the navigation is correctly above the placeholder image. But if you resize the browser window skinnier to where it switches to tablet size, and then resize it wider again, the navigation goes below the placeholder image.
Maybe it's something simple or maybe it's not. I can't figure it out.
My html structure is
<body>
<div id="page">
<div id="wrapper">
<nav></nav>
<section id="content"></section>
</div>
</div>
</body>
So I'm not sure how the content section is getting above the nav, but if you inspect the code and look at the html after doing the resize I describe above, the code becomes
<body>
<div id="page">
<div id="wrapper">
<section id="content"></section>
<nav></nav>
</div>
</div>
</body>
I'm not sure if it's the javascript I'm using or what the deal is that is juggling that and not resetting it. Surely it's not a missing CSS declaration...
EDIT: Resolved! Thanks Chris!

Looking at the code beginning on line #2619, the destroy function expects there to be an element #header, which doesn't exist. Add the element #header as the first element within your #wrapper and the issue will resolve. I'm assuming this isn't your JavaScript, so I wouldn't recommending changing it; instead, adjust your markup to give it what it expects.

Try changing the navigation.js line
a.elt.insertAfter("#content");
to
a.elt.insertAfter("#header");