I have a problem with some html object on my mobile view of menu. My menu change, depents on device's screen resolution. I'm using media query. That's my site:
goo.gl/TDmP4q . And when you visit my site with a computer:
http://i.imgur.com/epPUSCi.png[
^] ; And and with a smart phone, tablet, tv.. Well . Here comes the problem:
http://i.imgur.com/OYzTCm4.png[
^] I want to move logo and title to the right upper conner, but
ONLY when visiting with smartphone, tablet... (
NOT PC!!).
Here is a HTML code:
<header>
<div id="nav">
<nav class="nav-collapse">
<ul>
<li>
<img alt="icon" src="res/img/logo2.png">
</li>
<li>
<a rel="alternate" href="#" class="current" class="nav-collapse">Domov</a>
</li>
<li>
<a href="sub/menu1.html">Člani</a>
</li>
<li>
<a href="sub/menu2.html">Kontrolke</a>
</li>
<li>
<a href="sub/menu3.html">Urnik</a>
</li>
<li>
<a href="sub/menu4.html">O nas</a>
</li>
<li>
<a class="fck" href="password.html">Zasebna Stran</a>
</li>
<li id="title">Razredna Stran - R1A</li>
</ul>
</nav>
</div>
</header>
And my CSS code:
#nav {
font-family:"Lobster";
font-size:22px;
}
#nav #title {
color:white;
font-weight:bold;
margin-top:15px ;
margin-right:20px;
float:right;
font-size:26px;
}
#nav a {
float:left;
}
#nav img {
float:left;
height:48px;
margin-top:5px;
margin-left:10px;
margin-right:10px;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#454443;
border-bottom:3px solid #757575;
}
#nav li a {
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
border-bottom:3px solid #454443;
}
#nav li a:hover {
animation-name:navlink;
animation-duration:0.35s;
background:#0276F2;
border-bottom:3px solid #325AFA;
}
#nav li a.current {
border-bottom:3px solid #325AFA;
}
@keyframes navlink {
from {
background-color:#3D362B;
}
to {
background-color:#0276F2;
}
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
@media screen and (max-width: 480px) {
.nav-collapse {
float: left;
width: auto;
}
}
.nav-collapse li {
float: left;
width: 100%;
}
@media screen and (min-width: 58em) {
.nav-collapse li {
width: auto;
}
}
.nav-collapse a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-top: 1px solid white;
text-decoration: none;
background: #454443;
color: #fff;
width: 100%;
float: left;
}
.nav-collapse a:active,
.nav-collapse .active a {
background: #325AFA;
}
@media screen and (min-width: 58em) {
.nav-collapse a {
text-align: center;
border-top: 0;
float: left;
margin: 0;
}
}
.nav-collapse ul ul a {
background: #ca3716;
padding-left: 2em;
}
@media screen and (min-width: 58em) {
.nav-collapse ul ul a {
display: none;
}
}
What I have tried:
I tried moving nav-collapse class (in html code)... To the point, where icon and title won't be in nav class... But It doesn't work.