Котаны, такая тема, заодно может подскажите как лучше собрать. Есть nav в нём div с лого и свойством float: left; а по правой стороне идут якоря на экраны, ну как у всех. Сорян за простыню, но под кат код скрывать не хочет. Кароче в тогле (Chrome) на федоре скрывает при 600px, если скролить через ctrl тоже срабатывает, проверил на винде если скролить - скрывает, а если в тогле выставлять 600px то нет, просто не подтягивает правила. Затестил на двух самсунгах galaxy, один на хроме, второй на родном браузере. Код выглядит вот так:
html
<nav class="nav right">
<div id="name">CYY Robotics</div>
<ul>
<li class="current"> <!--SVG иконка гамбургера-->
<svg style="background:none;width:2em;height:1.6em;stroke:cyan;stroke-linecap: round;stroke-width:5px;padding-top: -5px;">
<line x1="5" y1="5" x2="36" y2="5"/>
<line x1="5" y1="16" x2="36" y2="16"/>
<line x1="5" y1="28" x2="36" y2="28"/>
</svg>
</li>
<li><a href="#compa">COMPARISON</a></li>
<li><a href="#fie">FIELDS</a></li>
<li><a href="#achi">ACHIVEMENTS</a></li>
<li><a href="#find">FIND US</a></li>
</ul>
</nav>
css
@media screen and (max-width: 1920px) {
@font-face {
font-family: Enduline;
src: url(assets/fonts/edunline.ttf);}
@font-face {
font-family: Roboto;
src: url(assets/fonts/Roboto-Regular.ttf);}
body {
margin: 0 auto;
font-family: Roboto;
background-color:rgb(100,100,100);
}
.nav {
position: relative;
margin:0 auto;
}
#name {
font-family: Enduline;
font-size: 3em;
padding: .1em 0em 0em 1em;
margin: 0;
color: cyan;
border:none;
float: left;
}
#name:hover {
color: white;
}
#name:active {
color:cyan;
}
.nav ul {
margin: 0;
padding: 1em 1em;
}
.nav li {
font-size: 1.25em;
font-weight: 700;
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: white;
line-height: 100%;
}
.nav a:hover {
color: cyan;
}
.nav .current {
background: none;
display: none;
}
.nav.right ul {
text-align: right;
}
}
@media screen and (max-width: 1366px) {
/* nav */
@font-face {
font-family: Enduline;
src: url(assets/fonts/edunline.ttf);}
@font-face {
font-family: Roboto;
src: url(assets/fonts/Roboto-Regular.ttf);}
body {
margin: 0 auto;
font-family: Roboto;
background-color:rgb(100,100,100);
}
.nav {
position: relative;
margin:0 auto;
}
#name {
font-family: Enduline;
font-size: 3em;
padding: .1em 0em 0em 1em;
margin: 0;
color: cyan;
border:none;
float: left;
}
#name:hover {
color: white;
}
#name:active {
color:cyan;
}
.nav ul {
margin: 0;
padding: 1em 1em;
}
.nav li {
font-size: 1.25em;
font-weight: 700;
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: white;
line-height: 100%;
}
.nav a:hover {
color: cyan;
}
.nav .current {
background: none;
display: none;
}
.nav.right ul {
text-align: right;
}
}
@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
}
.nav li {
display: none;
margin: 0;
}
.nav .current {
display: block;
padding-right: 1em;
}
.nav a {
display: block;
padding: 5px 15px 5px 32px;
text-align: right;
}
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
}
