How to make nav-justified to act in reverse order? What I mean is, I want on small (mobile) screens from tabs/pills to be positioned horizontally, and on bigger (desktop) screens to be positioned vertically i.e. to be stacked.
Here's an example for which CSS rules need to be modified (resize its window to see how it would look on both type of screens): http://s.bootply.com/render/1d0Cpp0po1
Does anyone know how to achieve this on the simplest way? Thanks in advance!
Solved it with this CSS:
.nav-justified-inverse > li {
float: none;
}
#media (max-width: 768px) {
.nav-justified-inverse > li {
display: table-cell;
width: 1%;
}
}
Demo: http://s.bootply.com/render/AtQH4rry48
Related
i am learning CSS (but i know some stuff).
I am working on a demo webpage that i want to create with css to have a layout that i want.
Concept:
I have a container DIV which also has a top-div, left-div and content-div inside.
At first, with the help of media queries i make a layout for 3 different devices:
#media all and (min-width: 960px)
#media all and (min-width: 600px)
#media all and (min-width: 340px) and (max-width 599px)
So at the lowest #media i make the top bar position fixed to be always at the top, else it is not fixed its relative and it has some margin
The proble is i've got an icon a menu-bar icon that you see in mobile websites, i create an image tag within top-div and in css i have display: none;, width: 6%;, height: 10%; if it will work it will be awesome. But when inside the 3rd #media i type div#container div#top-div img#menu_bar_icon{ display: block; } it doesn't work!
I tried the opposite to have the default display at first (just removed the display: none from the img) and within the #media i type div#container div#top-div img#menu_bar_icon{ display: none; } and it WORKS....
I don't know why this is happening, please help me
Thank you!
I am trying to centre the nav-bar links. But sadly i haven't had much luck so far. I've tried to use navbar-justified but that just throws every thing out of proportion.
here is the code.
I assume you wanted to center everything to the center. The easiest way is to use display: inline-block and then text-align: center on the parent element. Then also reset float to use the default aligment:
See you updated demo: http://www.bootply.com/iu9NOXfmEV
Make the container inline-block to get the width of the content, and align the navbar elements. To get rid of the gap underneath use vertical-align: top.
To avoid changes when collapsed add media query:
#media (min-width: 768px) {
.navbar {
text-align:center;
}
.navbar .container-fluid {
display: inline-block;
vertical-align: top;
}
}
You can see here
I'm trying to make a navbar (with bootstrap).
When the media's width is > 768px I want the navbar to be on the right (so I added float: right). But when the width is <768px I want the hamburger to be on the right (like it does right now), and the element to be centered.
This is how it looks right now.
Ad this to your responsive code:
#media screen and (max-width: 768px){
.nav>li {
position: relative;
display: block;
text-align: center;
}
}
Here is a working demo
I have a fixed top navbar in Twitter Bootstrap 3.
Everything works good until 1350px. After 1350px there becomes a gap between navbar contents. So I want to center my navbar.
I checked answers on this, this and this. None of them worked for me.
This is my fiddle: http://jsfiddle.net/mcqHE/56/
Currently I use Navbar 1.
To try centering navbar, I added Navbar 2 to the fiddle.
Check fiddle in 1500px width.
* Navbar 1 is one line, not centered and has gap.
* Navbar 2 is centered, no gap, but it is two lined.
It seems like the cause is this rule: #media (min-width: 1200px) .container { max-width: 1170px; }
So how can I make navbar centered, and one line if width is bigger than 1350px ?
This is an aswer for your problem:-)
You need to add follow lines to css:
#media screen and (min-width: 1350px) {
.navbar { text-align: center; }
.navbar-header { display: inline-block; float: none !important; }
.navbar-collapse.collapse { display: inline-block !important; }
}
Here is solution on: http://jsfiddle.net/myN2s/ .
Let me know if you solve this.
Everytime when you want to center elements, you need to add text-align:center to the parent element, and display: inline-block to elements which you want to center horizontally. None of these can be floated (this is very important).
This fix wil affect all styles on your page. But I guess it is what you are asking for, there was not enough space to put in on one line.
http://jsfiddle.net/mcqHE/58/
* {
font-size:10px;
}
Although the below answer covered most of it, I noticed the menus are still not in one-line, here are the following change I've made:
1) Yes, it's the width that's creating the two-gaps but the major culprit is the .container. So remove the <div> with the class .container
2) Add this CSS to keep your menu items centered:
.navbar-inner { text-align: center; }
3) Lastly this:
.collapse.navbar-collapse.in{ display: inline-block !important; }
Binds the two <ul> elements together.
Additional:
If you want the heading 'Navbar' to be centered too, you can do:
.navbar-header { float: none; }
Here's the JSFiddle.
And it's effect on a resolution > 1350px.
for navbar 1 add the following css to this div div class="navbar-collapse navbar-part2 collapse
max-width: 1350px;
margin-left: auto;
margin-right: auto;
max width will make sure the nav part wont go wider than 1350px
margin-left:auto and margin-right:auto will center the nav.
I think this is what you're after? if not sorry!
I truly wouldn't be posting a question if I hadn't already spent hours digging through files and researching. I must really not know what I'm looking for :-|
I want to know how and why divs in a container (or the container itself) can change to 100% width when a responsive design is scaled to iphone dimensions - like the below:
http://demo2.woothemes.com/whitelight/about/
the sidebar sits underneath the main content, then the divs inside stretch to 100%
It's driving me absolutely mad! Any help / direction must appreciated :)
Basic Media query responsive layout example:
Demo: http://jsbin.com/ayojan/1/edit
Resize browser to see effect.
div {
outline:solid black;
}
.content {
width:80%;
float:left;
}
.sidebar {
width:20%;
float:left;
}
#media only screen and (max-width: 767px) {
.sidebar {
width:100%;
float:none;
}
.content {
width:100%;
float:none;
}
}
Key points: inside the media query you unfloat the elements (float:none) and set them to width: 100%;