항상 친절한 답변 감사드립니다.
현재 홈페이지(www.xion.kr) 모바일에서 보이는 메뉴 형태가
https://imgur.com/a/zca6qsm 첨부와 같은데
이 형태를
https://imgur.com/a/eqj5Q70 첨부와 같이 바꾸려고 하는데,
어디에서 어떻게 바꿔야 될지를 몰라서요.. 크롬 검사 도구로 소스 살펴봐도 모르겠어요.
모바일 메뉴 설정하는 플러그인을 찾기는 했는데 이렇게 바꾸는 기능이 없는것 같습니다.
도움 부탁드립니다.
안녕하세요~^^
헤더 쪽에 표시되는 메뉴는 사용 중이신 테마의 header.php 파일을 확인해보시겠어요?
원하시는 대로 레이아웃을 만드시려면
HTML과 CSS에 대해 어느 정도는 알고 계셔야 할 듯합니다.
고맙습니다.
@media only screen and (max-width: 757px) {
.entry{margin:20px 0 50px 0}
#singlecontent h2 {margin-right:0;}
div.none-header{display:none;}
div.none-ticker{display:none;}
div.m_nav-wrap{display:block;height:55px;background-color:#333;}
div.m_nav-wrap h1 {margin:0 auto;text-align:center;padding-top:15px;}
div.m_nav-wrap div.menuTap {float:left;margin-top:-48px;}
div.m_nav-wrap div.menuTap .menuImgIcon {background-color:<?php echo $baseColor;?>;width:55px;height:55px;margin-top: 4px;}
div.m_nav-wrap div.menuTap .menuImgIcon .markIcon {position:relative;top:15px;left:12px;}
div.m_nav-wrap p.facebookBtn {float:right;margin-top:-24px;margin-right:14px;}
/* 1deth menu */
div.m_nav-wrap div.menuTap .menuContent ul.m_nav {display:none;background-color:#fff;position:absolute;top:54px;left:0;border-top:5px solid <?php echo $baseColor;?>;width:100%;border-bottom:3px solid <?php echo $baseColor;?>;}
div.m_nav-wrap div.menuTap .menuContent ul li {border-bottom:1px solid #ebedef;color:#333;font-size:16px;background:url('') no-repeat 96% 25px;background-size:15px,9px;}
div.m_nav-wrap div.menuTap .menuContent > ul.m_nav > li.menu-item-has-children { background:url('<?php echo esc_url( get_template_directory_uri() )?>/images/mobile_menu_arrow.png') no-repeat;background-position: right top 10px;}
div.m_nav-wrap div.menuTap .menuContent > ul.m_nav > li.current-menu-ancestor > a {color:<?php echo $baseColor;?>;}
div.m_nav-wrap div.menuTap .menuContent ul li a {padding-left:15px;padding-top:15px;padding-bottom:15px;display:inline-block;color:#333;}
/* 2deth menu */
div.m_nav-wrap div.menuTap .menuContent ul li > ul.sub-menu {display:none;background-color:#f9f9f9;border-top:2px solid #000;padding-top:25px;padding-bottom:10px; }
div.m_nav-wrap div.menuTap .menuContent ul li > ul.sub-menu li {margin-left:6px;padding-bottom:10px;border-bottom:none; background-size:2px,2px;}
div.m_nav-wrap div.menuTap .menuContent ul li > ul.sub-menu li a {padding:0 0 0 7px;}
div.m_nav-wrap div.menuTap .menuContent ul li > ul.sub-menu li.current-menu-item a {color:<?php echo $baseColor;?>;}
div#bnrTopWrap{display:none !important}
div.bnrTopWrapM{display:block; float:none; width:inherit;margin-bottom:8px;}
div.bnrTopWrapM img{width:100%}
#footer .foot-utill {display:block;}
}
@media only screen and (max-width: 490px) {
.archivepost li{padding:0 25px 0px 0; height:auto;overflow:auto;position:relative; margin:30px 0 0 0;}
}
div#bnrHouseWrap{position:relative;}
ul.bnrHouse {margin:0; padding:0;}
ul.bnrHouse li{list-style:none; padding-top:10px;}
ul.bnrHouse li img{width:100% !important}
div#bnrN1Wrap{}
ul.bnrN1 {margin:0; padding:0;}
ul.bnrN1 li{list-style:none}
ul.bnrN1 li img{margin:1% 0; width:100%}
.m_nav-wrap .logo-mobile {margin:0 auto;width:140px;padding-top:8px;height:36px;}
.m_nav-wrap .logo-mobile img {width:140px;height:35px;}
@media handheld, only screen and (max-width: 420px) {
.m_nav-wrap .logo-mobile {margin:0 auto;width:100px;padding-top:13px;height:30px;}
.m_nav-wrap .logo-mobile img {width:100px;height:auto;}
}
안녕하세요~ header.php 부분에서 제가 생각하는 모바일 화면에서의 메뉴 구성부분인데 맞는지 봐주시겠어요? 이 부분을 수정하면 되는지요? 그리고, header.php 에서 위 첨부 코드 밑으로 제이쿼리 구문이 이어지는데 여기에 모바일 메뉴는 이렇게 구성할거다 라는 식의 선언문구 같은게 들어가야 되는지요?
안녕하세요.
올려주신 코드는 헤더 메뉴 쪽 CSS 코드인 듯합니다.
첨부하신 이미지처럼 헤더 메뉴 쪽을 수정하시려면
HTML 또는 CSS 코드를 수정해주셔야 할 듯합니다.
jQuery 쪽에는 필요한 기능이 없다면 별도로 코드를 추가하지 않으셔도 됩니다.
고맙습니다.