I'm trying to make my bootstrap navbar collapse at a different width but changing the
//** Number of columns in the grid.
#grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
#grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
#grid-float-breakpoint: #screen-sm-min;
//** Point at which the navbar begins collapsing.
#grid-float-breakpoint-max: (#grid-float-breakpoint - 1);
just makes it fold on to two rows at different widths instead of collapsing and showing the hamburger icon. Is there something else I need to change in order to make it collapse down and show the icon?
I've changed it now to #screen-md-min
and it just deforms more :/ .. the width I want it to open and collapse at are the width of a desktop which is the md class but it doesn't seem to work at all :/
Edit the LESS variables in variables.less The responsive break points are set around line 200:
#screen-xs: 480px;
#screen-phone: #screen-xs;
// Small screen / tablet
#screen-sm: 768px;
#screen-tablet: #screen-sm;
// Medium screen / desktop
#screen-md: 992px;
#screen-desktop: #screen-md;
// Large screen / wide desktop
#screen-lg: 1200px;
#screen-lg-desktop: #screen-lg;
// So media queries don't overlap when required, provide a maximum
#screen-xs-max: (#screen-sm - 1);
#screen-sm-max: (#screen-md - 1);
#screen-md-max: (#screen-lg - 1);
Then set the collapse value for the navbar using the #grid-float-breakpoint variable at about line 232. By default it's set to #screen-tablet . If you want you can use a pixel value, but I prefer to use the LESS variables.
OR
Visit http://getbootstrap.com/customize/#less-variables
Change #navbarCollapseWidth in the formfield
Customize the collapsing point
Customize the #grid-float-breakpoint variable
Click "Compile and Download".
OR
Simply you can use a CSS media query. the breakpoint is here 1280 pixels:
Demo
css
body {
padding-top:70px;
}
#media (max-width: 1280px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
Related
I have Googled my problem but couldn't find a suitable solution. Effectively I am building an eBay listing template currently using HTML and CSS - I am using SCSS to generate the stylesheet. I am working on the menu aspect of my template at the minute.
I have set my media query so that on devices with width less than 690px (I'm not using standard queries, I am using breakpoints to suit my content - they are also subject to change), the menu buttons change to a block element and display in a column as opposed to a row (on desktop).
First off, here's the media query I am working with atm - it's a mixin in an SCSS partial file named _media.scss that I import into the main style.scss.
#mixin bp-large {
#media only screen and (max-width: 690px){
#content;
}
}
This is imported into my style.scss file using #import 'media';
Here is the HTML for my menu:
<div class='header'>
<section>
<div class='logo'>
<h2>Company Logo</h2>
</div>
<div class='top-menu'>
<ul>
<li><a href='#'>Store Front</a></li>
<li><a href='#'>Latest Arrivals</a></li>
<li><a href='#'>Featured Picks</a></li>
<li><a href='#'>Feedback</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</section>
</div>
Here is the relevant SCSS:
section {
width: 85vw;
margin: 0 auto;
.header & {
#include bp-large {
width: 60vw;
}
}
}
.logo {
#include bp-large {
text-align: center;
}
}
.top-menu {
background-color: $primary;
text-align: center;
width: 100%;
}
.top-menu ul {
list-style: none;
display: flex;
text-align: center;
flex-direction: row;
#include bp-large {
flex-direction: column;
}
}
.top-menu ul li {
flex-grow: 1;
display: flex;
align-items: center;
background-color: $button-color;
padding: 15px;
border-right: 3px solid $accent-color;
&:last-child {
border: none;
}
&:hover {
background-color: $button-hover;
cursor: pointer;
}
#include bp-large {
display: block;
border-bottom: 3px solid $accent-color;
border-right: none;
&:last-child {
border: none;
}
}
}
I have a GitHub pages set up for my project # http://dannyxcii.github.io/lst-tmp - currently the menu actually does do what it's supposed to do when viewed on a smartphone (after adding the following line of HTML):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
BUT - the menu is on the left of the page and not fitting the device width initially - the usual 'double tap to center' gets it looking how it is supposed to. Any ideas on how I could fix this?
The thing is the pixel that browser uses is different than the hardware pixels. They use what's called DIP (Density Independent Pixels or Device Independent Pixels).
The new mobile devices come with screen full HD or even more pixel in screen resolution. Example Samsung galaxy s8 has the resolution of 2,960x1,440. As it has width of 14440px, media queries like (max-width:760px) or any other media queries do not work as it max-width is 1440px.
However, to maintain a degree of consistency there are DIPs, DIPs convert you CSS pixel into something that is optimal for viewing your website. For mobile phones, the width in DIP is 320px.
TL;DR: after adding the 'meta viewport' tag, you are telling to the browser to use dips instead of CSS pixel. It treats every mobile as 320px device by mapping 2 or more pixel in higher resolution device to 1DIP.
There is a very short and sweet course, freely provided by Udacity and this goes through meta viewport tagLink to the course. Hope this helps :)
Ok, so I'm using Bootstrap 3 for one of my websites.
Everything works great, but there's something wrong with the #media query to define some css for smaller devices.
So I've included all the necessary files of bootstrap (first the bootstrap css & then my own, the js,...)
In my css I have for example:
#media (max-width: 768px) {
.md-only {
display:none;
}
.item-left {
padding:0px;
}
}
.item-left {
padding:10px;
}
So what now happens is that when I add class="md-only" in my html the div (for example) doesn't show up on devices < 768px. However, the div with class="item-left" still uses the padding:10px and not the padding:0px as defined in the #media query. So it takes one css class, but not the rest.
I don't get what I'm doing wrong...
The problem is the order of your rules.
Try placing the .item-left before the #media.
.item-left{padding:10px;}
#media screen and (max-width: 768px){
.md-only{display:none;}
.item-left{padding:0px;}
}
<div class="md-only"></div>
<div class="item-left">qweqwe</div>
Make sure you are not overriding your styles. As you can see in your example, you've added the class .item-left a second time after defining it in the media query earlier thus making it obsolete.
.item-left {
padding: 10px;
}
#media (max-width: 768px) {
.md-only {
display: none;
}
.item-left {
padding: 0px;
}
}
I was wondering if it is possible to change the position of the search box but only on mobiles.. I tried to put id="search" on the box that contains the input with:
#media only screen and (max-width: 767px) {
#search
{
position:absolute;
top: 0;
width:90%;
background: none repeat scroll 0 0 #ffffff;
}
}
But doesn't seem to work. I want the search box just at the bottom of the header, but only on mobiles. Is this possible?
At work we use JavaScript & jQuery to move an element on different screen sizes like so:
function moveMenu(){
if($(window).width() < 767){
// If the screen is less than 767, move the menu to mobile position
$('#menu-header').prependTo('#mobile-menu-wrapper');
}
else {
// Otherwise, put it in the normal location
$('#menu-header').prependTo('#header-menu-wrapper');
}
}
Its important that if someone loads the page on a small screen, then resizes it to large that this function runs. So we also add these two bits to trigger it on page load and on page resize:
$(window).resize(function(){
moveMenu();
});
$(window).load(function(){
moveMenu();
});
This method means you don't have to duplicate menus to 'reflow' the page.
Add another search box in the Center-block
Hide this on desktop and show it on the
UPDATE: Position fixed will work but will not allow to use other elements
the code is something like this
#search1 {
display: block;
}
#search2 {
display: none;
}
#media only [....] {
#search1 {
display: none;
}
#search2 {
display: block;
}
}
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
In my application, I have a left sidebar which I want to hide when the user prints the page.
I am using the following media query :
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin: 0 !important;
}
}
i am hiding the sidebar, that works, but canceling the left margin on the wrapper does not work.
It works when I display the inspector and activate the emulation for css print with chrome and opera, it does not work if i press ctrl+P.
Do you have an idea of what I could do ?
I assume that the original css rule you have set is "margin-left: 50px" as an example of 50px. Try the same way in your media query like this "margin-left: 0". I think it worked for in the past. Might not be the best solution but it will probably get you going.
CSS
#page-wrapper {
margin-left: 50px; /* as an example */
}
#media print {
#left_sidebar, #backend_navbar, #flash-messages, #header_buttons, .object_social, a:after, .hide_on_print {
display: none !important;
}
#page-wrapper {
background-color: #ffffff !important;
margin-left: 0; /** try without !important, if doesn't work, then add it back.**/
}
I Hope that helps.