media query css

[rafinos]

Γεια σας παιδιά!

 

Τι media query πρέπει να γράψω ώστε να εμφανίζεται το κουμπάκι με τις τρεις γραμμούλες (collapsed) του bootstrap στα 1065px και όχι στα 767px στη navbar;

 

Τις τρεις γραμμούλες εννοώ τι δεύτερη εικόνα. Με ενδιαφέρει όλο αυτό γιατί στη navbar έχω δεξιά κάποια εικονίδια και όπως φαίνεται στην τρίτη εικόνα σε περίπτωση που μειωθεί το width του παραθύρου κάτω από 1065px τότε μεγαλώνει το height της navbar.

 

Ορίστε και ο κώδικας της navbar:

<nav class = "navbar navbar-default navbar-fixed-top" id="#navbar" role = "navigation">
		<div class = "navbar-header">
			<button type = "button" class = "navbar-toggle" 
				data-toggle = "collapse" data-target = "#navbar-collapse">
				<span class = "sr-only">MovieQUIZ.gr</span>
				<span class = "icon-bar"></span>
				<span class = "icon-bar"></span>
				<span class = "icon-bar"></span>
			</button>
			<a class = "navbar-brand" href = "index.html">MovieQUIZ.gr</a>
		</div>
   
		<div class = "collapse navbar-collapse" id = "navbar-collapse">
			<ul class = "nav navbar-nav">
				<li><a href = "#information">Πληροφορίες</a></li>
				<li><a href = "#screenshots">Screenshots</a></li>
				<li class = "dropdown">
					<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
						Download
						<b class ="caret"></b>
					</a>
					<ul class = "dropdown-menu">
						<li><a href = "#playstore">Play Store</a></li>
						<li><a href = "#direct_download">Κατέβασμα αρχείου</a></li>
					</ul>
				</li>
				<li><a href="#contact">Επικοινωνία</a></li>
				<li class = "dropdown">
					<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
						Άλλες εφαρμογές
						<b class ="caret"></b>
					</a>
					<ul class = "dropdown-menu">
						<li><a href = "crossword.html" title="ΣταυρόΛΕΞΟ">ΣταυρόΛΕΞΟ</a></li>
						<li><a href = "https://goo.gl/Mz4KYN" title="Sluzzle">Sluzzle</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="mailto:[email protected]" title="Movie QUIZ email address" target="_blank"><i class="fa fa-lg fa-envelope"></i>  email</a></li>
				<li><a href="https://www.facebook.com/moviequiz/" title="Movie QUIZ facebook fanpage" target="_blank"><i class="fa fa-lg fa-facebook"></i>  facebook</a></li>
                <li><a href="https://twitter.com/moviequizgr" title="Movie QUIZ twitter profile" target="_blank"><i class="fa fa-lg fa-twitter"></i>  twitter</a></li>
			</ul>
		</div>
	</nav>

[egoeimai1]

http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries

[rafinos]

Το κυριότερο θέμα μου είναι ποια elements πρέπει να εξαφανίσω και ποια να εμφανίσω.

 

Βασικά κάνω display: none; τα .collapse .navbar-collapse. Ποια εμφανίζω (εκτός και αν κάνω λάθος και για τα collapse);

 

 

Βρήκα τη λύση.

 

Όποιος έχει το ίδιο θέμα μπορεί να δει τον κώδικα παρακάτω:

@media (max-width: 1065px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Επεξ/σία 16 Φεβρουαρίου 2017 από rafinos