Фиксированная высота навигации по разным ширине экрана ⇐ CSS

[Anonymous]

Я сделал проект начальной загрузки, и высота Navbar была последовательной по ширине экрана: что было фантастически. < /p>

Это новый проект, и я не могу понять, как сделать это сам. Я использую только систему сетки от Bootstrap - ничего больше. < /p>

то, что необходимо, - это фиксированная высота навигации, когда я изменяю ширину экрана с помощью инструмента хромированного инспектора < /strong>. Что -то, что мне трудно достичь - даже в другом чистом файле только с index.html и style.css. < /P>

я сначала собираюсь в этом проекте, так что не повредуйте глазами < /em>, и я использую порт для 320px. />https://jsfiddle.net/m9b9zba3/

html и css:




Band Index Page
[*]

date

where
some details

date1

where
some details

date2

where
some details

date3

where
some details

date4

where
some details

date5

where
some details






Latest news...






Logo

• 4
• Contact
• About
• Home

CSS:
html {
margin: 0;
padding: 0;
height: 100%
}

body {
margin: 0;
position: relative;
height: 100%;
font-size: 18px;
font-family: 'Oswald', sans-serif;
font-weight: 100
}

input {
padding: 0;
margin: 0
}

img {
display: block;
padding: 0;
margin: 0
}

.content {
font-size: 3em
}

.row {
margin: 0;
padding: 0
}

img.img-responsive {
width: 100%;
height: auto
}

.up-gig {
box-sizing: border-box;
padding: 1%;
border: 2px solid #000
}

.navbar {
display: block;
overflow: hidden;
list-style-type: none;
position: fixed;
bottom: 0;
background: #545454;
list-style: none
}

.navbar .logo {
width: 180px;
height: 120px
}

.arrow-up {
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 45px solid #000;
margin: 3% 4% 0;
z-index: 1;
float: right
}

.navbar li {
height: 120px;
border-radius: 5px;
border-sizing: border-box;
position: relative
}

.navbar li:nth-child(odd) {
background: #828282
}

.navbar ul li a {
display: inline-block;
margin: 34px
}

.navbar input[type=checkbox] {
background-color: #800080;
opacity: 0;
width: 150px;
height: 120px;
position: absolute;
right: 2%;
z-index: 3
}

.nav-item {
margin: auto 0;
width: 100%;
text-align: center;
font-weight: 300
}

.navbar input {
float: right
}

.nav-left {
float: left
}

.nav-right {
float: right
}

.navbar input[type=checkbox] ~ ul {
height: 0;
-webkit-transition: height .3s linear;
transition: height .3s linear
}

.navbar input[type=checkbox]:checked ~ ul {
height: 480px;
-webkit-transition: height .3s ease-in-out;
transition: height .3s ease-in-out
}

.navbar input[type=checkbox] ~ span {
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.navbar input[type=checkbox]:checked ~ span {
margin-top: 4.3%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform .3s linear;
transition: -webkit-transform .3s linear;
transition: transform .3s linear;
transition: transform .3s linear, -webkit-transform .3s linear
}
< /code>

p.s. Я также использую флажок Hack, чтобы переключить Navbar на небольших экранах.
Я не могу действительно заставить сайт масштабироваться, как я хотел, но я изучу это позже.
Спасибо заранее < /p>

Подробнее здесь: https://stackoverflow.com/questions/415 ... een-widths