Search code examples
cssresponsive-designnavigationwidthfixed

responsive web navigation problem with position fixed and width

I've got problem that the navigation for tablet PC with picture I add should cover whole page. Because I gave it fixed position width : 100%, height : 100% . But somehow there is a gap as you can see. I dont know where did I missed :( .....

gap1

enter image description here

gap2 (after I gave it left : -50px)

enter image description here

here is HTML

<body>
<header>
    <div class="side_nav">
    </div>
    <div class="header_con">
        <span><a href="#"></a></span>
        <p><a href="#"><img src="images/logo.png" alt="logo"></a></p>
            <nav>
                <ul class="depth1">
                    <li><a href="#">코로나-19</a>
                        <ul class="depth2">
                            <li><a href="#">손세정제</a></li>
                            <li><a href="#">소독제</a></li>
                        </ul>
                    </li>
                    <li><a href="#">컬렉션</a>
                        <ul class="depth2">
                            <li><a href="#"><small>new</small>클레멘타인 앤 바질</a></li>
                            <li><a href="#"><small>new</small>베티버 앤 바이올렛</a></li>
                            <li><a href="#">아로마테라피 시너지</a></li>
                            <li><a href="#">허벌리스트</a></li>
                            <li><a href="#">풋 리바이버</a></li>
                            <li><a href="#">인블룸</a></li>
                            <li><a href="#">크리스탈크러쉬</a></li>
                            <li><a href="#">배스타임</a></li>
                            <li><a href="#">선물세트/ 기프트세트</a></li>
                        </ul>
                    </li>
                    <li><a href="#">오일</a>
                        <ul class="depth2">
                            <li><a href="#">페이셜오일</a></li>
                            <li><a href="#">멀티오일</a></li>
                        </ul>
                    </li>
                    .
                    .
                    .
                </ul>
            </nav>
    </div>
</header>

normal CSS

header .header_con {width: 100%; height: 100%; position: relative; height: 174px;}
header .header_con p img {width: 350px; height: auto;}
header .header_con>div{width: 100%;}
header nav { width: 750px;/* margin:0 auto;*/ position: absolute; left: 50%; margin-left: -360px;}
header ul.depth1>li{float: left; width: 70px; margin: 0 0.2%; font-size: 0.9em; font-weight: bold; text-align: center;}
header ul.depth2{display: none;  position: absolute; z-index: 100; width: 200px; margin-top: 20px;  background: #fff; text-align: left; padding: 20px; font-weight: normal; font-size: 0.8em;}
header ul.depth2>li {margin-bottom: 12px;}

and here is (max-width: 1050px) CSS

@media all and (max-width: 1050px) {

header div.header_con nav {/* display: none;*/ position: fixed; top:0; left: -50px; width: 100%; height: 100%; background: #0b223b; border:1px solid red; z-index: 110;}
header div.header_con nav a{ color: white;}
header div.header_con nav .depth1{display: block; color: white; height: 100%;}
header div.header_con nav .depth1 li {float: none ;width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid #999; }
header div.header_con span{position: absolute; top: 50%; margin-top: -13px; left: 30px;   z-index:100; width: 30px; height: 25px; background: url(../images/navbar.png) no-repeat; background-size: 30px 25px;}
header div.header_con span a{width: 30px; height: 25px;}

}

Solution

  • Have you tried setting top: 0; right: 0; bottom: 0; left: 0; on the nav instead of the width andd height?