메인메뉴 위치가 최상단 내용에 따라 달라 집니다.
관련링크
https://www.k-big.co.kr/
68회 연결
본문
메인 메뉴 위치가 최상단 내용에 따라 달라집니다
최상단 내용이 하니 일때는 정상적으로 노출 되지만 (아래처럼)
최상단 내용이 2개가 되면 메인 메뉴 위치가 아래 처럼 왼쪽으로 몰리게 됩니다
최상단 내용이 2개 더라도 메인 메뉴 위치는 최상단 내용이 1개 일때 처럼 고정 하고 싶습니다.
방법을 알려 주시면 감사하겠습니다
head.php
<nav id="gnb">
<h2>메인메뉴</h2>
<div class="gnb_wrap">
<ul id="gnb_1dul">
<center>
<li class="gnb_1dli gnb_mnal">
<button type="button" class="gnb_menu_btn" title="전체메뉴">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="sound_only">전체메뉴열기</span>
</button>
</li>
<li class="gnb_1dli" style="z-index:999">
<a href="#" class="gnb_1da">광역시</a>
<span class="bg">하위분류</span>
<div class="gnb_2dul">
<ul class="gnb_2dul_box">
<li class="gnb_2dli">
<a href="https://www.k-big.co.kr/seoul" class="gnb_2da">서울특별시</a>
<a href="https://www.k-big.co.kr/busan" class="gnb_2da">부산광역시</a>
<a href="https://www.k-big.co.kr/daegu" class="gnb_2da">대구광역시</a>
<a href="https://www.k-big.co.kr/dajeon" class="gnb_2da">대전광역시</a>
<a href="https://www.k-big.co.kr/incheon" class="gnb_2da">인천광역시</a>
<a href="https://www.k-big.co.kr/ulsan" class="gnb_2da">울산광역시</a>
<a href="https://www.k-big.co.kr/gwangju" class="gnb_2da">광주광역시</a>
<a href="https://www.k-big.co.kr/sejong" class="gnb_2da">세종특별자치시</a>
</li>
</ul>
</div>
</li>
default.css
/* 메인메뉴 */
#gnb {position:relative;background:#fff}
#gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap {margin:0 auto;position:relative}
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3}
#gnb #gnb_1dul {font-size:1.083em;padding:0;border-bottom:1px solid #e0e2e5;zoom:1}
#gnb ul:after {display:block;visibility:hidden;clear:both;}
#gnb .gnb_1dli {float:right;line-height:55px;padding:0px;position:relative}
#gnb .gnb_1dli:hover > a {color:#3a8afd;
-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}
.gnb_1dli .bg {position:absolute;top:24px;right:8px;display:inline-block;width:125px;height:10px;overflow:hidden;background:url('../img/gnb_bg2.gif') no-repeat 50% 50%;text-indent:-999px}
.gnb_1da {display:block;font-weight:bold;padding:0 5px;color:#080808;text-decoration:none}
.gnb_1dli.gnb_al_li_plus .gnb_1da{ - :}
.gnb_2dli:first-child {border:0}
.gnb_2dul {display:none;position:absolute;top:54px;min-width:140px;padding-top:2px}
.gnb_2dul .gnb_2dul_box {border:1px solid #e0e2e5;border-top:0;padding:0;
-webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
-moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2)}
.gnb_2da {display:block;padding:0 10px;line-height:40px;background:#fff;color:#080808;text-align:left;text-decoration:none}
a.gnb_2da:hover {color:#3a8afd;background:#f7f7f8;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out}
.gnb_1dli_air .gnb_2da {}
.gnb_1dli_on .gnb_2da {}
.gnb_2da:focus, .gnb_2da:hover {color:#fff}
.gnb_1dli_over .gnb_2dul {display:block;left:0}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0}
.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808}
.gnb_wrap .gnb_empty a {color:#3a8afd;text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555}
#gnb .gnb_menu_btn {background:#4158d1;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px}
#gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0}
#gnb .gnb_mnal {float:right;padding:0}
#gnb_all {display:none;position:absolute;border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow:0 2px 5px rgba(0,0,0,0.2)}
#gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef}
#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#3a8afd}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}
답변 1
#gnb .gnb_1dli {
float: left;
line-height: 55px;
padding: 0px;
/* position: absolute; */
}
position: absolute; 이 부분을 해제 하고 float: left; 왼쪽으로 정렬 하세요..
theme/basic/css/default.css 128번째 줄
.gnb_2dul {
display: none;
/* position: absolute; */
top: 54px;
min-width: 140px;
padding-top: 2px;
}
position: absolute 이 부분도 해제해야 하네요..
theme/basic/css/default.css 139번째 줄
답변을 작성하시기 전에 로그인 해주세요.
