위 그림에서 보이는 영카트 pc의 메뉴바를 반응형으로 바꾸고자하는데, 위치가 고정된채 전혀 변화가없네요.

어떻게 손봐야 하는지 조언 부탁드입니다.

해당 부분의 스크립트들은 아래와 같습니다.

shop.head.php

------------------------------

<div id="hd_menu">
    <button type="button" id="menu_open"><i class="fa fa-bars" aria-hidden="true"></i> 카테고리</button>
    <?php include_once(G5_THEME_SHOP_PATH.'/category.php'); // 분류 ?>
    <ul class="hd_menu">
        <li><a href="<?php echo shop_type_url(1); ?>">히트상품</a></li>
        <li><a href="<?php echo shop_type_url(2); ?>">추천상품</a></li>
        <li><a href="<?php echo shop_type_url(3); ?>">최신상품</a></li>
        <li><a href="<?php echo shop_type_url(4); ?>">인기상품</a></li>
        <li><a href="<?php echo shop_type_url(5); ?>">할인상품</a></li>
    </ul>
</div>

default.shop.css

------------------------------

#hd_menu {position:relative;background:#000;width:1200px;margin:0 auto}
#hd_menu:after {display:block;visibility:hidden;clear:both;content:""}
#hd_menu button#menu_open {float:left;width:265px;height:50px;border:0;background:#3a8afd;text-align:left;color:#fff;padding:0 20px;font-weight:bold;font-size:1.167em}
.hd_menu {float:left;display:inline-block;width:935px;font-size:1.083em}
.hd_menu:after {display:block;visibility:hidden;clear:both;content:""}
.hd_menu li {float:left;width:20%;padding:12px 0;line-height:26px;text-align:center}
.hd_menu li:last-child a {border-right:0}
.hd_menu li a {display:block;color:#fff;border-right:1px solid #333}

response.css

----------------------------

#hd_menu > ul {width:100%; }