Фоновая версия настольной навигации не работает?

Question

Итак, что-то переопределяет свойство background-color на моей веб-странице. Он отлично работает в мобильной версии, но по какой-то причине, когда он выполняет медиа-запрос, цвет фона совпадает с цветом фона тела.

Это работает, однако, когда я использую nav {position: fixed;}, но я не могу установить его как фиксированный, потому что над ним есть заголовок, поэтому, когда вы прокручиваете навигационные джойстики внизу и над ними есть пробел.

Так что же вызывает изменение цвета фона медиазапроса?

РЕДАКТИРОВАТЬ

Это то, что я вижу, когда у меня на компьютере полноэкранный режим. настольный навигационный снимок И это то, что я вижу, когда мобильный макет mobile nav shot

(Извините, если это очевидный ответ, а я его просто не вижу)

/*NAV*/

nav 
{
	background-color: #3f3f3f; /*this color doesn't work in the media query*/
	width: 100%;
	color: #e9e9e9;
	z-index: 3; 
}

/*MOBILE FIRST FORMATTING*/

nav ul 
{
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

nav li a 
{
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

nav li a:hover,
nav .hambut:hover 
{
  background-color: #189000; /*green*/
}


/*NAV LINKS*/

nav .menu 
{
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/*MENU FORMATTING*/

nav .hamicon 
{
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 2em 1.5em;
  position: relative;
}

nav .hamicon .navicon 
{
  background: #e9e9e9;
  display: block;
  height: .15em;
  position: relative;
  transition: background .2s ease-out;
  width: 1.5em;
}

nav .hamicon .navicon:before,
nav .hamicon .navicon:after 
{
  background: #e9e9e9;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

nav .hamicon .navicon:before 
{
  top: .375em;
}

nav .hamicon .navicon:after 
{
  top: -.375em;
}

/*HAMBURGER BUTTON*/

nav .hambut 
{
  display: none;
}

nav .hambut:checked ~ .menu 
{
  max-height: 15em;
}

nav .hambut:checked ~ .hamicon .navicon 
{
  background: transparent;
}

nav .hambut:checked ~ .hamicon .navicon:before 
{
  transform: rotate(-45deg);
}

nav .hambut:checked ~ .hamicon .navicon:after 
{
  transform: rotate(45deg);
}

nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after 
{
  top: 0;
}


/*DESKTOP NAV FORMATTING*/


@media (min-width: 48em) 
{
	
	nav
	{
		background-color: #3f3f3f;
	}
	nav li 
	{
		float: left;
	}

	nav li a 
	{
		padding: 1em 1.5em;
	}

	nav .menu 
	{
		clear: none;
		float: right;
		max-height: none;
	}

	nav .hamicon
	{
		display: none;
	}
  
}

		<nav> 
           
			<input class="hambut" type="checkbox" id="hambut" />
			<label class="hamicon" for="hambut"><span class="navicon"></span></label>
			
			<ul class="menu">
				<li><a href="#about">About</a></li>
				<li><a href="#trailer">Trailer</a></li>
				<li><a href="#download">Download</a></li>
				<li><a href="#devs">Devs</a></li>
			</ul>


       </nav>

Answer 1

Это происходит потому, что в настольной версии вы используете float: right для выравнивания элемента <ul>. float свойство имеет странное поведение и не предназначено для выравнивания блочных элементов, оно предназначено для выравнивания встроенных элементов.

По этой причине, когда элемент имеет автоматическую высоту и его дочерний элемент использует float, родительский элемент будет игнорировать размер этого элемента для вычисления высоты.

В вашем случае это приводит к тому, что в вашей настольной версии ваш элемент <nav> не будет использовать высоту <ul> для вычисления своей собственной высоты, поскольку нет явной высоты и других дочерних элементов, итоговая вычисленная высота будет такова: 0px .

У вас есть два решения, первое - установить фиксированную высоту:

nav {
  ..
  height: 50px;
}

Во-вторых, рекомендуется использовать так называемое clearfix .

Исправление отменяет эффекты float, а родительский элемент снова использует все дочерние размеры для вычисления высоты.

/*NAV*/

nav 
{
	background-color: #3f3f3f; /*this color doesn't work in the media query*/
	width: 100%;
	color: #e9e9e9;
	z-index: 3; 
}

/*MOBILE FIRST FORMATTING*/

nav ul 
{
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

nav li a 
{
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

nav li a:hover,
nav .hambut:hover 
{
  background-color: #189000; /*green*/
}


/*NAV LINKS*/

nav .menu 
{
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/*MENU FORMATTING*/

nav .hamicon 
{
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 2em 1.5em;
  position: relative;
}

nav .hamicon .navicon 
{
  background: #e9e9e9;
  display: block;
  height: .15em;
  position: relative;
  transition: background .2s ease-out;
  width: 1.5em;
}

nav .hamicon .navicon:before,
nav .hamicon .navicon:after 
{
  background: #e9e9e9;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

nav .hamicon .navicon:before 
{
  top: .375em;
}

nav .hamicon .navicon:after 
{
  top: -.375em;
}

/*HAMBURGER BUTTON*/

nav .hambut 
{
  display: none;
}

nav .hambut:checked ~ .menu 
{
  max-height: 15em;
}

nav .hambut:checked ~ .hamicon .navicon 
{
  background: transparent;
}

nav .hambut:checked ~ .hamicon .navicon:before 
{
  transform: rotate(-45deg);
}

nav .hambut:checked ~ .hamicon .navicon:after 
{
  transform: rotate(45deg);
}

nav .hambut:checked ~ .hamicon:not(.steps) .navicon:before,
nav .hambut:checked ~ .hamicon:not(.steps) .navicon:after 
{
  top: 0;
}


/*DESKTOP NAV FORMATTING*/


@media (min-width: 48em) 
{
	
	nav
	{
		background-color: #3f3f3f;
	}
	nav li 
	{
		float: left;
	}

	nav li a 
	{
		padding: 1em 1.5em;
	}

	nav .menu 
	{
		clear: none;
		float: right;
		max-height: none;
	}

	nav .hamicon
	{
		display: none;
	}
  
}

		<nav> 
           
			<input class="hambut" type="checkbox" id="hambut" />
			<label class="hamicon" for="hambut"><span class="navicon"></span></label>
			
			<ul class="menu">
				<li><a href="#about">About</a></li>
				<li><a href="#trailer">Trailer</a></li>
				<li><a href="#download">Download</a></li>
				<li><a href="#devs">Devs</a></li>
			</ul>
            <!-- This is the clearfix -->
            <div style="clear: both"></div>
            <!-- End of clearfix -->
       </nav>