Я пытаюсь переделать (или, возможно, изменить) мою версию шаблона запуска W3 School. У меня есть панель навигации с некоторыми выровненными по правому краю ссылками, которые должны быть доступны для просмотра на рабочем столе и отсутствовать на мобильном телефоне, заменяемые меню гамбургера. Ни один, кажется, не делает, как задумано. Кнопка мобильного меню, которая не должна быть видна на широкоэкранном экране, (еще хуже, она исчезает при уменьшении области просмотра) ... и элементы меню рабочего стола, которые не должны исчезать, пока окно не уменьшено до 600 пикселей, выглядят как оставьте где-нибудь около 50% ширины моего дисплея шириной 1920 пикселей.
неработающие элементы
Вот мой код:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
line-height: 1.7;
}
h1 {font-family: "Roboto", sans-serif}
h2 {font-family: "Roboto Condensed", sans-serif}
body,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.container {
position: absolute;
top: 0;
width: 100%;
z-index: 9999;
padding: 0;
}
.navbar {
width: 100%;
height: 70px;
z-index: 9999;
margin: 0;
top: 0;
padding: 16px;
overflow: hidden;
background-color: #fff!important;
color: #333!important;
box-sizing: border-box;
}
.nav-right {
float: right!important;
}
.navbar .nav-button {
padding: 16px;
}
.navlogo {
width: auto;
height: 55px;
margin: -17px 0px 0px 0px;
padding: 0 10px;
vertical-align: middle;
}
.navbar .navbar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0;
}
.navbar-block .navbar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
/* Full height header */
.header {
background-position: center;
background-size: cover;
background-image: url("../images/headerImage.jpg");
min-height: 100%;
}
/* Media Queries */
@media (max-width: 600px) {
.hide-mobile: {
display: none!important;
}
}
@media (min-width: 601px) {
.hide-desktop: {
display: none!important;
}
}
