I have a navbar every thing looks great until it goes responsive. the bottom drop down has a 5 px gap all the way around it.
https://jsfiddle.net/nc2hamed/5/
i have tried adding and removing padding on the
.expand {
max-height: 40em;
}
The top gap is because your .menu has big padding-top.
The left and right gaps are there because your .wrap has width: 95% (not 100%).
So this code will fix both issues:
.navbar {
width: 105%;
margin: 0 -2.5%;
}
#media only screen and (min-width: 800px) {
.navbar {
width: auto;
margin: 0;
}
.navbar .menu {
padding-top: 20px;
}
}
Your problem is in your .navbar .menu element. You need to set the padding-top to 0px unless your screen height is not mobile.
You should remove some padding-top on .navbar .menu and set the max-width to 100%
#media(your_media_query) {
.navbar .menu {
padding-top: 25px;
}
.wrap {
width: 100%;
max-width: 100%;
}
}
Related
I am using a div.wide tag in my stylesheet to display a fullscreen graphic at the top of a page.
div.wide {
height:500px;
background-image: url(http://www.vidalingua.com/images/pont-des-invalides.jpg);
background-position: 50%;
background-size: cover;
overflow:hidden;
}
When I reduce the screen to smaller widths, as would be seen on a phone, whitespace margins begin to appear.
http://vidalingua.com/blog/top-travel-blogs-for-france.php
How can I solve remove the whitespace to left and right of image at smaller screen resolutions?
That's because you have this rule in bootstrap.css's media query max-width:767px
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
}
so you need to add negative margin inside that query, something like this:
#media (max-width: 767px) {
div.wide {
margin: 0 -20px
}
}
If you try reset padding in body it will create horizontal scrollbar.
#media (max-width: 767px){
body {
padding-left: 20px;
padding-right: 20px;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: -20px;
margin-right: -20px;
}
}
change this to
#media (max-width: 767px){
body {
padding-left: 0px;
padding-right: 0px;
overflow:hidden;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0px;
margin-right: 0px;
}
}
i have an example (JSFiddle Example), where i want the content of the nav bar to be scrollable, if it is cut off by the screen size of the browser.
See Normal Size and Small Size for current problems.
A requirement is that the left part of the screen (250px) is covered by the navigation bar (or any parent) if the screen size is > 768px.
I did not achieve any satisfying result so far, therefore i'm aksing for help!
Thanks in advance!
CSS
#media (min-width: 768px)
{
.sidebar-main.expanded {
width: 250px;
}
.sidebar-main {
position: fixed;
height: 100%;
}
.sidebar-main .navbar {
height: 100%;
}
.sidebar-main .navbar .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.sidebar-main .navbar-header {
float: none !important;
}
.sidebar-main .navbar-collapse {
padding: 0px;
max-height: none;
}
.sidebar-main ul {
float: none;
&: not {
display: block;
}
}
.sidebar-main li {
float: none;
display: block;
}
}
Fixed this problem by setting the height manually to a certain PX value in Javascript, although i wanted to avoid this, it seems to me as the only solution.
I am creating a responsive header. I got two columns and want the button in the right column to be vertical centered.
I know I can center items using top: 50%; margin-top: -xy px, and my button although got a fixed height: 40px.
To use this method I wrapped my button inside a div {position: relative}. This does not work, as the div does not stretch its own height.
How can I solve this with css? First I thought about Flexbox, but it has quite some lack of browser compatibility.
JSFIDDLE DEMO
You can greatly simplify your code - remove floats, (use display: inline-block instead), remove the .relative div, etc.
Working Fiddle
html, body {
margin: 0;
padding: 0;
font-size: 16px;
}
header {
background: red;
color: #fff;
padding: 0.5em;
}
header h1 {
font-size: 2em;
margin: 0 0 0.2em;
}
header p {
margin: 0;
}
header button {
height: 40px;
width: 70px;
}
.column-left {
display:inline-block;
width: 70%;
vertical-align: middle;
}
.column-right {
width: 29%;
text-align: right;
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* responsive */
#media (min-width: 200px) {
header {
padding: 1em;
}
}
#media (min-width: 300px) {
header {
padding: 1.5em;
}
}
#media (min-width: 400px) {
header {
padding: 2em;
}
}
#media (min-width: 500px) {
header {
padding: 2.5em;
}
}
#media (min-width: 600px) {
header {
padding: 3em;
}
}
/* helpers */
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
Remove this div with position: relative and add position: relative to your header tag. You can even delete your column-right div.
Another solution:
header button {
top: 50%;
transform: translateY(-50%); // instead of negative margin-top (it is useful when your button has dynamic height, supports IE9+ with -ms- prefix)
}
JSFIDDLE
I'm using the dashboard template example that comes with Bootstrap. Sidebar disappears after a certain screen size and that's fine. But I want to set a specific width until that point. Now it's kind of responsive and stretches in width on bigger screens (it's a bit nasty on large monitors.) A good width would be 250px.
CSS
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #31373d;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
color: #98a7b5;
}
.nav-sidebar > li > a:hover {
background: transparent;
color: #fff;
}
.nav-sidebar > .active > a, .nav-sidebar > li > a:hover {
color: #fff;
background-color: #272c30;
}
/*
* Main content
*/
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
Any ideas? Thanks.
Source code is avaliable at getbootstrap.com
How about a max-width: 250px in your .sidebar CSS?
You could use a CSS media query to set a max-width on larger screens..
#media (min-width: 992px){
.sidebar {
max-width:250px;
}
}
Demo: http://www.bootply.com/126485
I just ran into the same issue. For me I was happy for the sidebar to remain fluid for the small and medium viewports. At a large viewport of 1200px or more I want to have a fixed width of 250px and then have the main content area cover the rest.
In the HTML give your main content div a class name or id. This will make it easy to select it in your css media query. Here i've used a class called 'content'.
<div class="col-sm-3 sidebar"> ... </div>
<div class="col-sm-9 col-sm-offset-3 content"> ... </div>
Then add your css:
#media(min-width:1200px){ // breakpoint where I set a fixed sidebar width. You can change this to whatever you want.
.sidebar {width:250px}
.content {margin-left:0;padding-left:265px;width:100%;} // reset the width and margin, overwriting the bootstrap grid. Add padding to the left to equal the width of your fixed width sidebar + half your defined grid gutter width. For me that is the default 15px.
}
My website container has a width of 95%. I'm trying to create a navigation which spans the full width of my container. It works fine until I add the 'position: fixed;' to the navigation, it then just ignores the container and spills outside the container.
below is my CSS code and a link to a picture.
#page {
width: 95%;
max-width: 1440px;
height: auto;
margin-left: auto;
margin-right: auto;
border: solid 1px #000;
}
.nav {
width: 100%;
background-color: fuchsia;
height: 50px;
position: fixed;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
display: block;
padding: 5px;
background-color: fuchsia;
line-height: 40px;
}
Image of problem... http://i.imgur.com/pZEbe.png
Thanks for any help! It's much appreciated!
you are giving position:fixed which makes your navigation to come out of the parent div or element.
Add something like this in your navigation element:
.nav
{
width:95%; /*dont give width as 100% */
margin:0 auto; /* for center alignment purpose */
background-color: fuchsia;
height: 50px;
position: fixed;
}