Why does my navbar change color in responsive mode?

1

Hi guys.

I am helping out a company trying to improve their existing website, and while the code of the former developer is not too complicated, I am very confused about the navigation.

First image shows the pc-screen navigation. No problems here.

header1
header11047×309 81.4 KB

Then when I scale the page down to mobile view, this happens:

header2
header2556×511 14 KB

Then when I scale back to pc view, it stays this way.

header3
header31183×308 75.7 KB

What the heck is happening? I inspected the element and it says the background color is white.
I also checked the CSS and there is no grey background color mentioned anywhere. So I am really confused.

The HTML

  <nav id="nav">
    <ul class="menu">
      <li class="nav_item"><a href="https://book.dinnerbooking.com/dk/da-DK/book/table/pax/1620/3">Bordbestilling</a></li>
      <li class="nav_item"><a href="#menukort_header">Menukort</a></li>
      <li class="nav_item"><a href="#mad_ud_af_header">Mad ud af huset</a></li>
      <li class="nav_item"><a href="#selskaber_header">Selskaber</a></li>
      <li class="nav_item"><a href="#hotel_header">Hotellet</a></li>
      <li class="nav_item"><a href="#om_os_header">Om os</a></li>
      <li class="nav_item"><a href="#find_os_header">Find os</a></li>
      <li class="toggle"><span class="nav_menu_icon"></span></li>
    </ul>
  </nav>

nav {
	padding: 5px 20px;
}

ul {
	list-style-type: none;
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	color: #84a0a8;
}

.menu li {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	padding: 15px 5px;
}
.menu li a {
	display: block;
}

/* Mobile menu */

.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
    background-color: white;
}
.toggle {
	margin-left: 30px;
}
.nav_item {
	width: 100%;
	text-align: center;
	display: none;
}

.nav_item.active {
	display: block;
}

.toggle {
	order: 1;
	cursor: pointer;
}

.nav_menu_icon {
	position: relative;
	background: black;
	display: inline-block;
	height: 2px;
	width: 18px;
}

.nav_menu_icon::before,.nav_menu_icon::after{
	background: black;
	position:absolute;
	content:"";
	display: inline-block;
	height: 2px;
	width: 18px;
}

.nav_menu_icon::before {
	top: 5px;
}

.nav_menu_icon::after {
	top: -5px;
}


@media all and (min-width: 468px) {
	.menu {
		justify-content: center;
	}
}

@media all and (min-width: 768px) {
	.menu  {
		padding: 15px;
	}
	.menu li {
		padding: 15px;
	}
	.nav_item {
		justify-content: center;
		display: block;
		width: auto;
	}
	.toggle {
		display: none;
	}
}
2

Can you link to the page?
Any JavaScript applying styles? Ah. That would show up in the inspector.

3

I’m guessing you fixed it? At least I do not see the issue when I look at the page.

4