헤더에서 로고와 메뉴의 위치를 바꾸는 법
| CMS/프레임워크 | Rhymix 2.0 |
|---|---|
| 개발 언어 | 사용안함 |
현재 equeer 레이아웃을 사용하고 있습니다.
이 레이아웃의 헤더 영역에서
로고 | 메뉴 | 검색창 | 프로필 순으로 구성되어있는데, 메뉴를 왼쪽 정렬하고 로고를 가운데 정렬하고 싶습니다.
어떻게 하면 좋을까요?? float를 바꿔보았는데도 적용이 안되어서 여쭙습니다.
/* Header Logo */
.header .float-left > h1.logo-item{display: inline-block; height: 60px; margin-right: 20px}
.header .float-left > h1.logo-item{transition: opacity 200ms; -moz-transition: opacity 200ms; -webkit-transition: opacity 200ms; -o-transition: opacity 200ms}
.header .float-left > h1.logo-item:hover{opacity:0.8}
.header .float-left > h1.logo-item a { float:left; height: 60px}
.header .float-left > h1.logo-item span {position: relative; top: 12px; color: #3d3d3d}
.header .float-left > h1.logo-item div {background: url(img/logo.svg) no-repeat left center; width: 100px; height: 50px; margin: 5px 0; cursor: pointer; background-size: contain !important}
댓글 9
지금 까만 비행기를 하얀 비행기 위치에 오도록 만들고 싶습니다.
</h1>
사이 내용을 모두 <div class="float-left"> 항목 밖으로 빼내고, 메뉴 항목 뒤에 위치시킨다음
logo-item에
margin:0 auto;
속성을 주시면 될 것 같네요
이게 맞나요??
<div class="header container-fluid">
<div class="gnb-wrapper float-right">
<div class="gnb-wrap">
<div class="gnb">
<ul>
<li loop="$global_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']" class="popover popover-list popover-animationLeft a-hover-primary">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Logo -->
<h1 class="logo-item" style="margin:0 auto;">
{@ $_logo_img = $layout_info->logo_img}
<a href="<!--@if($layout_info->logo_url)-->{$layout_info->logo_url}<!--@else-->{getUrl('')}<!--@end-->">
<!--@if($_logo_img)-->
<div style="background: url('{$layout_info->logo_img}') no-repeat left center; <!--@if($layout_info->logo_width)-->width:{$layout_info->logo_width}<!--@end-->"></div>
<!--@elseif($layout_info->logo_text)-->
<span>{$layout_info->logo_text}</span>
<!--@else-->
<div></div>
<!--@end-->
</a>
</h1>
<!-- END:logo -->
</div>
<div class="float-left">
</div>
아까 처음 레이아웃에서 해당 h1을 <div class="float-left">안에서 빼내고 메뉴 다음에 붙여 넣으라고 말씀드렷던겁니다.
float-left 클래스 안에 있는 로고 부분 밖으로 빼내시고 메뉴가 끝나는 태그와 그 상위 태그 항목 사이에 배치하셔야합니다.
아예 float-left 안에서 빼내고 메뉴가 끝나는 태그 다음에 붙여 놓은것이 위의 코드인건데, 아무런 변화가 없길래 float-right 안에 제일 첫번째에 현재 로고 부분을 넣었는데 아예 없어져버렸습니다.
음.. 일단 없어졌다는 건 여기를 건드리는게 맞다는 것이니, 더 해보도록하겠습니다.
감사합니다.
개발자 도구를 통해 조정을 해봤는데요.
대강 이런 형태를 기본으로 해서 추가적으로 손을 보시면 될 듯합니다.
<div class="float-left">
<div class="gnb-wrapper float-right">
<div class="gnb-wrap">
<div class="gnb">
<ul>
<li>
<a href="#">패키지여행</a>
<ul class="popover popover-list popover-animationLeft a-hover-primary">
<li>
<a href="/rx/inside">국내여행</a>
</li>
<li>
<a href="/rx/outside">해외여행</a>
</li>
</ul>
</li>
<li>
<a href="/rx/free">자유여행</a>
</li>
<li>
<a href="/rx/pilgrimage">성지순례</a>
</li>
<li>
<a href="/rx/attendance">당일치기</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Logo -->
<h1 class="logo-item" style="position: relative; margin: 0 auto; width: 30px; height: 60px;">
<a href="/" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">
<div style="background-size: contain !important;background: url('/files/attach/images/431/e1703661de91d71485db6fe61c73f921.png') no-repeat left center;width: 100%;height: 100%;"></div>
</a>
</h1>
<!-- END:logo -->
<div class="float-right">
<!-- Search -->
<form action="/" method="get" class="search_form">
<input type="hidden" name="error_return_url" value="/rx/">
<input type="hidden" name="vid" value="">
<input type="hidden" name="mid" value="index">
<input type="hidden" name="act" value="IS">
<input type="text" name="is_keyword" value="">
<input class="btn" type="submit" value="">
</form>
<!-- END:Search -->
<!-- Search - isMobile -->
<a href="#" class="search_draw-btn"><i class="fa fa-search" aria-hidden="true"></i></a>
<!-- END:Search - isMobile -->
<!-- Login -->
<a href="#" class="btn_secondary_round btn_header_login"><span id="btn_login_text">로그인</span></a>
</div>
</div>
덧. 그런데 이렇게 하면 모바일에서 반응형 디자인이 잘 안 될 가능성이 높은데, css에 관해 좀 더 연구하면서 직접 작업을 해보시는 게 어떨까 싶습니다.