I have been trying to create a mobile friendly navbar that doesn't collapse.
By default the navbar collapses when the screen is shrunk to a < 768px width.
I know that this can be done by modifying bootstrap directly.
I want to avoid doing that and instead use overrides.
I stopped using navbar-header and applied the following css to stop the collapse.
/* stop navbar from collapsing */
.navbar-collapse.collapse {
display: block;
}
.navbar-nav>li, .navbar-nav {
float: left;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-right {
float: right;
}
I have it so that it doesn't collapse. However, when the screen is < 768 width, the navbar increases in height and the brand, text, button, etc. that it contains are moved slightly.
Screenshot with screen width = 768
Screenshot with screen width < 768
I created a jsbin here http://jsbin.com/vojiqi/edit?html,css,output
Does anyone know why this is happening and how to stop it?
I just want a navbar that adapts to the screen size and doesn't collapse.
SOLUTION
Using bootstrap's navbar: http://jsbin.com/nemipu/edit?html,css,output
Not using bootstrap's navbar: http://jsbin.com/pediga/edit?html,css,output
Using bootstrap's navbar (no navbar-collapse)
http://jsbin.com/posuvu/edit?html,css,output
In addition to #isherwood answer, add border-top: 0; to the 'navbar-collapse.collapse' class.
Edit:
Assuming you want to take advantage of the Bootstrap navbar features, you could add the media query below to your CSS to stop the brand 'jumping' when the viewport changes past the breakpoint.
#media only screen and (min-width : 320px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
.navbar-nav>li>a {
padding-top:15px;
padding-bottom:15px;
}
.navbar-text {
float: left;
}
}
However, I would think you may want to put some space back in between the brand and the edge of the viewport.
You also have borders coming and going at that breakpoint, but this takes care of most of the problem:
.navbar-nav {
margin: 0 -15px;
}
Demo
Just add this to your code, bootstrap has a default margin in that case
.navbar-nav {
margin: auto;
}
Related
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
New to media queries. But I think I've missed the boat somewhere.
Suppose I have a topBar like the one in the snippit below, made up of a topBar container, fixed width, and a list, and the entire unit is floated to the right. I would like it so as long as the screen is resized until, let's say 1000px, for the topBar to shrink along with the screen as it is resized. When it hits 1000px something else will happen, but we can worry about that later.
For this to work, do I need to set queries for both the topBar container and topBar fixed width, or just the container? Also, is it a Max width or a min width that I should be targeting for the overall screen?
#top-menu
{
width: 100%;
background-color: white;
height: 40px;
color: #00a5b5
}
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
color: #00a5b5;
margin: 0 auto;
}
#topMenu-fixedWidth ul
{
list-style: none;
float: right;
margin-right: 5px;
}
#topMenu-fixedWidth ul:nth-child(4)
{
margin-right: 0;
}
#topMenu-fixedWidth ul li
{
float: left;
margin: 10px;
<div id="top-menu">
<div id="topMenu-fixedWidth">
<ul>
<li class="topMenuText">Partners</li>
<li class="topMenuText">Careers</li>
<li class="topMenuText">Language</li>
<li class="topMenuText">Login</li>
</ul>
</div>
</div>
Since you want content to re-size along with a re-sizing screen, you should use viewport percentage lengths, such as vh and vw. Elements will be sized relative to the viewport.
Also, is it a Max width or a min width that I should be targeting for the overall screen?
Either. Doesn't really matter, unless you have a specific need.
#media ( min-width: 1000px ) {
/* executes code here when the screen is 1000px or more */
}
#media ( max-width: 1000px ) {
/* executes code here when the screen is 1000px or less */
}
More information:
Max-Width vs. Min-Width
Common breakpoints for media queries on a responsive site
You have your base css which applies to all screen sizes. Then beyond that, you just set whatever css classes you want to change when the screen size changes. For example if you want remove the float below 1000px, you would do the following:
#topbar {float: right;}
#media screen and (max-width: 1000px) {
#topbar {float: none;}
}
Your #top-menu already has a width of 100% so that will resize no matter what. Your #topMenu-fixedWidth will need to be inside of a media query like so:
#media screen and (min-width 1000px){
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
}
}
*note: You only need to include the styles you want to change within the media query.
I need to apply some css rules only for when bootstrap stacks the columns when resizing the page.
At the moment i am using media queries like this one:
#media (max-width: 983px) {
.footer-links {
margin-top: 0;
}
.col-info {
margin-top: 15px;
}
.show-link {
color: #FFFFFF;
}
.show-title {
color: #FFFFFF;
}
}
The problem with this is that the width value is fixed size. On a smaller device the columns would stack with a lower width.
So I need to detect when bootstrap wraps the columns as well as when it expands them again.
As far as I remember, bootstrap 'stacks' after iPad portrait size:
Before iPad =
#media (max-width: 768px) {
After iPad =
#media (max-width: 767px) {
So, to affect the styles, add your own overrides to the second media query and make sure that the CSS is declared after the bootstrap css and specificity is correct.
I had a quick question regarding twitter bootstrap navbars. I'm attempting to change the width of my navbar to only occupy 80% of the page width and centered on the page.
I've tried setting the width of .navbar, .nav, .navbar-collapse to 80%, all either doing nothing or shrinking the navbar way too much.
Link to the code:
http://pastebin.com/fHWJfYTL
Thanks for your help.
Here are the selectors (media queries) used in BS3, if you want to stay consistent:
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
This is still accurate as of version 3.1.1
Demo
css
#media(max-width:767px) {
.navbar {
max-width:80%;
margin:auto;
/* float: left; or right as you want and then remove margin: auto*/
}
}
#media(min-width:768px) {
/* add here also if you want to have big menu 80% width */
}
#media(min-width:992px) {
/* add here also if you want to have big menu 80% width */
}
#media(min-width:1200px) {
/* add here also if you want to have big menu 80% width */
}
Try This:
.navbar {
margin: auto;
width: 80%;
}
I just can't figure out a way to implement a shorter navbar with correctly scaling navbar-brand offset.
When I try to use a percental value for the max width or the margin-right of the navbar it completely disturbs the offset of the navbar-brand.
When I try to use a fixed value for the margin-right and then try to change the margin-left from the .navbar > .container .navbar-brand I get better results but sometimes the .navbar-brand makes a short jump.
Here I have the bootply code with my two different tries.
http://bootply.com/86804
I hope someoen can help me.
update
Between a screen width of 768 en 991 pixels (the small grid) i find this:
Is the above what you call a jump?
Possible solutions:
set your grid breaking point to 991px
only apply the margin-right:100px; of your .navbar-else above the 991px
add a break in your.nav-brand:
#media (min-width: 768px) and (max-width: 991px) {
.navbar-brand > strong:after {
content:"\a";
white-space: pre;
}
}
make your font smaller below 992 px
etc.
--end update
The examples on http://getbootstrap.com/components/#navbar don't wrap the .navbar-header in a .container.
Try to set:
.navbar
{
width:50%;
}
.navbar-header
{
padding-left:80px;
}
see: http://bootply.com/86839