메뉴 css질문여...

메뉴 css질문여...

QA

메뉴 css질문여...

본문

상단 메뉴를 다음과 같이 하였습니다.

<div id="gnb" >
    <ul>
    <!--상단 로고를 좌측으로 출력-->
    <div style="float:left; vertical-align:middle">
    <a href="http://rgm01.cafe24.com/shop/">
    <img src="http://rgm01.cafe24.com/data/common/mobile_logo_img" width="100%" alt="RGM - ED generic 메인">
    </a></div>
    <!--상단 로고를 좌측으로 출력 끝-->
        <li class="gnb_1dli" style="z-index:999">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr10" class="gnb_1da">
  1번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:998">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr20" class="gnb_1da">
  2번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:997">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr30" class="gnb_1da">
  3번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:996">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr40" class="gnb_1da">
  4번메뉴</a>
    </li>

        <li class="gnb_1dli" style="z-index:995">
        <a href="http://rgm01.cafe24.com/shop/list.php?ca_id=kr50" class="gnb_1da">
  5번메뉴</a>
    </li>

            <li class="gnb_1dli" style="z-index:994"><a href="/bbs/board.php?bo_table=feedback">
    6번메뉴</a></li>
        </ul>

</div>

 

위와 같이 하였을때 컴퓨터 브라우져로 보면 잘나오는데...

핸드폰으로 볼때 로고 밑으로 1번메뉴~6번메뉴가 나오게 할순없나요??

현재는 핸드폰으로 메뉴옆에 로고가 떠요..ㅜㅜ

이 질문에 댓글 쓰기 :

답변 2

1794652227_1539314199.1603.png

 

왼쪽이 모바일이구 오른쪽이 pc인데 모바일에서는 RGM글자 아래에 메뉴가 뜨게 하고싶다는 말씀이신건가요?

이게 맞는지 모르겠지만;;media query를 활용해서 수정하시면 될 것 같아요. 아래는 예시 입니다.

/*추가*/
.gnb_logo_wrapper{
  float:left;
  vertical-align:middle;
}
/*767픽셀까지는 float none 적용*/
@media (max-width:767px){
  .gnb_logo_wrapper{
    float:none
  }
}
 
<div class='gnb_logo_wrapper'><!--기존 style삭제하고 class로 대체-->
<a href="http://rgm01.cafe24.com/shop/">
<img src="http://rgm01.cafe24.com/data/common/mobile_logo_img" width="100%" alt="RGM - ED generic 메인">
</a></div>

css 적힌 부분도 같이 올려주실 수 있나요? 지금 상태로 봐서는 "로고 메뉴" 이 순서로 뜨는거 같은데;;

css
/* gnb */
#gnb{border-bottom:1px solid #d8d8d8;border-top:1px solid #eee; background:#f3d857;}
#gnb li{display:inline-block;}
#gnb li a{line-height:60px;font-size:12px;padding:0 ;display:block;font-weight:bold;transition: all 0.2s;letter-spacing:1px;vertical-align:top}
#gnb li a:hover{background:#f3f3f3}
#gnb ul{border:0;vertical-align:top}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}

.gnb_1da {font-weight:bold;text-decoration:none; font-family:"나눔고딕"; font-size:16px; color:#214f28;}
.gnb_1dli_on .gnb_1da {background:url('../shop/img/gnb_bg01.gif') #626870 center right no-repeat;color:#fff;text-decoration:none}

제가 css잘몰라 검색어에서 class값만 올렸습니다. ^^;;;

답변을 작성하시기 전에 로그인 해주세요.
전체 660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT