ipad表示でもハンバーガーメニューを表示させたい

いつもお世話になります。
タイトルの通りスマホとタブレット表示ともにハンバーガーメニューに切り替わる様設定したいのですがなぜかスマホのみしか表示されないので原因を知りたいです。よろしくお願いいたします。

実践したコード

<div class="container nav-sp">
<div class="row">
    <div class="col span-12 header">
        <h1><a href="#"><img src="img/logo@2x.png" alt="ロゴ" class="logo"></a></h1>
		<div class="header-box"><a href=""><img src="img/tel@2x.png" alt="電話" width="167px"></a>
       <a href="" target="_blank"><img src="img/reserve@2x.png" alt="web予約" width="213px"></a></div>
        </div>
    </div>
<div class="row">
    <div class="col span-12">
        <nav>
        <div id="open"><img src="img/button.png"></div>
        <div id="close"><img src="img/button2.png"></div>    
            <div id="navi">
        <ul>
            <li><a href="index.html">ホーム</a></li>
            <li><a href="#1">text</a></li>
            <li><a href="#2">text</a></li>
            <li><a href="#3">よくある質問</a></li>
            <li><a href="#4">料金</a></li>
            <li><a href="#5">アクセス</a></li>
         </ul>
             </div>
        </nav>
    
        </div>
    </div>
    </div>
</header>

```
CSS
```
.fixed{
	position: fixed;
	background-color: #ffffff;
	width: 100%;
	position: fixed;
	opacity: 1.0;
	z-index: 99;
}
.header {
	display: flex;
    flex-direction: row;
    padding: 0 0 0 0;
}
.header-box {
	margin-left: auto;
	display: flex;
	justify-content: ﬂex-end; 
	/*margin-top: 8px;*/
}
.contact-button {
	padding: 1rem;
	border: 2px solid #000;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: #f7f7f7;    
}
nav a {
    padding: 0.5rem;
}
.mainimg .fv-sp{
	display: none;
}




@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open,#close  {
    display: block;
    width: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
```