I've got some CSS and media queries which hide and show my navigation:
So by default the navigation is:
nav {
display: inline;
}
Then using media query I hide it:
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
All works perfectly well, I then have some JavaScript hooked up to a button to show and hide the navigation when the media query is in effect.
However when I resize the browser back to full screen, larger than 767px the navigation does not reappear. How can I get the navigation to appear for desktop users?
bind the jquery resize handler to the window like this
$(window).resize(function(e){
if($(window).width() > 767){
$('nav').show()
} else {
$('nav').hide()
}
})
there is probably a few optimisations you can do with caching objects but this should get you want you need to start with
#media all and (min-width: 768px) {
nav
{
display: inline!important;
}
}
Kai Qing's answer helped me realise that I just needed to override the inline CSS the jQuery .toggle event was adding - Inside the correct media query of course.
You can make the js add a class to the nav and use !important to overwrite the media query statement...
nav {
display: inline;
}
.force_display{
display:inline !important;
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
just add force_display class in the js function (assuming you're using jquery)...
$('#button').on('click', function(){
$('nav').toggleClass('force_display');
});
Related
I want to show the navbar only on devices bigger than ipad and on smaller devices a different styled navbar. I tried it
1) css only using display:none for smaller devices
#media (max-width: 768px) {
nav {
display:none;
}
}
2) css only using visibility: hidden / visibility:visible
#media (min-width: 768px) {
nav
{
visibility:visible;
}
}
#media (max-width: 768px) {
nav
{
visibility:hidden;
}
}
3) used jquery
$(window).on("orientationchange load resize", function () {
var width = $(document).width();
if(width<765){
$("#navbar").hide();
}
else if(width>765){
$("#navbar").show();
}
});
see jsfiddle (with jquery): https://jsfiddle.net/codingcodingcoding/913j87bb/
Nothing works. If anyone knows why, please tell me.
If you add to your jsfiddle (at the css window):
#media (max-width: 768px) {
nav {
display:none;
}
}
it works. Checked it by reducing result window. You don't need jquery for this.
Hope it helps.
So I'm using bootstrap to make a navbar and used their example navbar as my foundation.
I fiddled with the bootstrap file to make it so that the navbar will collapse at 995px instead of 768px. Now because of that my navbar's button stays at the left side until the window size is below 768px.
I found that if I changed
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
to
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
then it works fine.
However I put
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
into a custom.css and loaded it after bootstrap.css and no change occurred. My custom.css didn't override the boostrap.css. I would like to refrain from changing the bootstrap.css.
This is what the navbar looks like right now
This is what it should look like
So the quick fix is adding !important to your custom styles.
Another way to fix this is to make your custom styles more specific. I'm talking about the selector. You should give the element an Id and call that in your custom styles.
This makes your custom styles more specific, and therefore take precedence. You can also increase the specificity by indicating the parents in the selector.
header #yourNewId { ... } > #yourNewId{ ... } > .navbar-header{ ... }
Always apply latest rule with equal specificity selectors.
First, if not yet, place custom.css after bootstrap.css.
Then check media queries. If you just add
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
to custom, it can't override it between 768 and 994 in bootstrap.
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
Use something like it (change it to what you want):
#media (min-width: 768px) {
.navbar-header {
float: none;
}
}
#media (min-width: 995px) {
.navbar-header {
float: left;
}
}
The element is always floating left, so you won't be seeing any change. Never.
I have some elements on my page that display and some that hide via a media query, and ultimately the nav disappears and is replaced by a responsive jQuery menu. This all works great, but when I resize the browser after, some of the elements that where once hidden are not not. This is what I have for the media query
#media only screen
and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}
I essintially want to hide it again on the same breakpoint sizing back up. This doesn't seem to work.
#media only screen
and (min-width: 1282px)
{
#wrapMiddleNew { display:none; }
}
I just got trough your page and you have to add more query format.. this should do the trick
/* Normal Formating */
#wrapLeft, #wrapMiddle, #wrapRight {
display:block;
}
#breakNav {
display:none;
}
/* Media Query */
#media only screen and (max-width: 1282px) {
#wrapLeft, #wrapRight {
display:none;
}
#breakNav {
display:block;
}
}
#media only screen and (max-width: 900px) {
#wrapLeft, #wrapRight, #breakNav {
display:none;
}
}
So each time your window goes lower 1282px will apear if its bigger will hide....
Do this:
#wrapMiddleNew{
display:none;
}
#media only screen and (max-width: 1282px)
{
#wrapMiddleNew { display:block; }
}
You don't need the second query as the first bit of css only comes into effect while the screen is less than a certain number here is a demo:
http://jsfiddle.net/Hive7/WZXM6/
CSS:
#media all and (max-width: 500px) {
.hi {
display: none;
}
}
Here is a media query tutorial:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
You are targeting the wrong div your query should look like this:
#media only screen and (max-width: 1282px) {
#breakNav {
display: none;
}
}
Then remove any jquery affecting that element
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}