I am trying to get my bootstrap navigation bar to collapse when the div.navbar-right portion of the navbar cannot fit a side the brand(left side) of the navigation bar well at a lower resolution (mainly for mobile devices such as iPhones, iPad, etc.).
I have tried to override the .collapse in my css with: @media (max-width: 320px) but unfortunately that doesn’t do anything and bootstrap still makes it collapse far too early as I would like it to. Here is the codepen of the issue I am having.
Here are some images to illustrate to you What is happening: What I want to happen:
I have tried researching this issue but all of the posts that I have come across didn’t have a solution that resolved my issue, most of them were regarding the .collapse happening too late.
The problem with bootstrap is that you spend all day over-riding the defaults when you want different behaviours as the menu collapses are all built around specific device widths rather than concentrating on changes where the design needs it. Of course this is the drawback with all frameworks as they know nothing about your design.
If you use bootstrap you should really just go with their defaults in most cases otherwise you would be better off without it.
You can change your nav behaviour in your codepen but it will take all the following rules.
The issue isn’t really that the navbar collapses too soon but rather the desktop view opens too late as bootstrap is mobile first and the smaller screen is the default and then the desktop views are opened up with min-width media queries starting at 768px etc.
What would my alternative be for a 100% responsive framework. I feel it would be much more of a pain to create my own @media query’s for every single element I want to be responsive on my website. When I think about it I feel that a framework such as Bootstrap, Foundation, etc. is the best method to make a website as responsive as possible.
Unfortunately frameworks ‘chase devices’ most of the time or have ‘pre-determined’ break points at which to change the columns into something smaller etc. These breakpoints bear no relation to what is going on in your page as seen with your simple navigation and truly responsive sites are built around the design rather than pre-determined breakpoints.
You don’t create media queries for every element you just create media queries when the design looks awkward or doesn’t fit properly. Open and close your desktop browser slowly from wide to small and if at any point the design looks bad or doesn’t fit then throw in a media query at that point and make it better. If you have created fluid elements then a few well chosen media queries end up catering for all devices without knowing anything explicitly about their size or orientation. Base you media queries on the needs of the design and not on the needs of some imaginary device width.
It’s easier to build a site from scratch than it is to try and squeeze a framework to fit your design unless your design was designed with that framework in mind. If you continually find yourself fighting the framework then chances are it was the wrong choice. To modify frameworks takes more knowledge than it does to write your own site because frameworks are quite sophisticated and quite bloated.
Frameworks can be useful for quick mock ups if you go with the usual defaults etc or if you work in a large team. Many of the add-ons are also useful in a framework so sometimes you can use the framework but avoid much of the grid and save on some bloat and complexity. In the end you do need to have a good grasp of CSS to modify a framework and if you have a good grasp of CSS then why not write your own code:)
In the end it’s a choice you have to make for yourself
That’s exactly the point.
The pre-set break points in Bootstrap don’t fit in with your design. So to correct that, you would have to override those break points to suit it.
So effectively you are having to “create my own @media query’s for every single element” even with bootstrap.
I am now trying to re create my navigation bar without any bootstrap elements trying to get it to become responsive myself but am having an issue where my image on my navigation bar isn’t sitting in the center of my navbar when I minimize the window slowly.
I have a few @media querys setup for the img like this:
…but the issue I am having is between each of the @media queries when adjusting the window. If the screen’s max-width is between1024px & 1600px the image isn’t centered (only when the max-width IS 1024px or 1600px.
I guess what I am trying to ask is, Is there a way to have the@mediaqueries animated between each other well or a way to avoid having to make 4 thousand@mediaqueries for each max-width resolution. You can view the codepen project here.
Thanks for the markup. What I am trying to do though is make it so in every resolution the brand image inside of the div.navbar-left is pulled to very left of the navbar and centered vertically down the navbar at all resolutions. Here is a screenshot to illustrate to you what I am talking about:
Would you please distinguish between the left and right navbars. Are they equal widths or what?
And what’s the story with “resolutions”? Are you talking about viewport widths? or font-sizes?
There are several ways of vertically centering the logo image in the navbar row. The easiest to me is to make the bar a display:table and the two halves (assuming there are two halves) display:table-cells, then assign vertical-align middle to the table-cells. Normally the image should be left aligned.
If you still have a multitude of bootscrap media queries around, get rid of them and think about your layout afresh.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/bootstrap-navbar-collapses-too-early/244233/
-->
<style type="text/css">
/* basic css for html & body */
html, body {
background-color:#f7f7f7;
padding:0;
margin:0;
}
nav {
background-color:#343534;
display:table;
width:100%;
table-layout:fixed;
}
.navbar-left,.navbar-right {
display:table-cell;
vertical-align:middle;
height:60px; /* fixed heights are not usually a good idea */
}
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<div class="navbar-left">
<img src="http://i.imgur.com/IGvg5kM.png" alt="heart[fx] logo" width="150px">
</div>
<div class="navbar-right"> <!-- undescribed -->
</div>
</nav>
</header>
</div>
</body>
</html>
Sorry for misunderstanding. By resolutions I mean all the elements (the brand image within the .navbar-left, the .navbar-right) being displayed the same way if a user is on an Iphone 5, iPad, monitor that is 1024px in width, etc…
It seems to be working better now so that the images and elements to the right are being displayed the same way as I adjust the window. I have made an updated codepen project here.
I do not see anything in the CodePen window using Firefox 50 or Chrome 49.0 (and did not before), so I am not sure what the CodePen is supposed to be demonstrating. or is it not supposed to be displaying anything… just holding the code?
Time for me to get some sleep. Someone else will pick this up shortly.
How is that possible if the elements are larger than the screen on which they need to be displayed? They can’t always look the same on an iphone as on a desktop unless you remove the viewport meta tag and let the device automatically scale the site infinitesimally small!
What you need to do is make the best use of screen width for the elements that you have by utilising media queries to move or change the elements around a little which is why for smaller screens you introduce the hamburger icon and hide navigation options when they no longer fit on screen.
Responsive sites are sites that adapt to screen width in the best way possible and that usually means re-organising the content to fit better. It doesn’t mean just making content smaller and smaller although for some elements like images and large headings you would indeed make them smaller.
You have minimum elements in your navbar at the moment and you can get right down to 380px before needing a media query to hide/move the sign in buttons etc.
It is up to you to decide what happens as elements get squashed or look awkward or just don’t fit and then adjust them with well placed media queries. As I mentioned above it looks like one media query at around 380px would be the place to change your nav to fit better or to move nav items to the hamburger etc (as before).
