질문/공유질답게시판

헤더에서 로고와 메뉴의 위치를 바꾸는 법

김선호
Extra Form
CMS Rhymix 2.x

현재 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
  • profile
    https://xetown.com/questions/585558 8번
  • profile profile
    http://sodoi8691.dothome.co.kr/rx/

    지금 까만 비행기를 하얀 비행기 위치에 오도록 만들고 싶습니다.
  • profile profile
    <h1 class="logo-item">
    </h1>

    사이 내용을 모두 <div class="float-left"> 항목 밖으로 빼내고, 메뉴 항목 뒤에 위치시킨다음
    logo-item에
    margin:0 auto;

    속성을 주시면 될 것 같네요
  • profile profile
    말씀하신대로 이렇게 코드 조정을 했으나 변화가 없었습니다.
    이게 맞나요??

    <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>
  • profile profile
    이렇게 주시면 저도 도움을 못드리는데요.

    아까 처음 레이아웃에서 해당 h1을 <div class="float-left">안에서 빼내고 메뉴 다음에 붙여 넣으라고 말씀드렷던겁니다.

    float-left 클래스 안에 있는 로고 부분 밖으로 빼내시고 메뉴가 끝나는 태그와 그 상위 태그 항목 사이에 배치하셔야합니다.
  • profile profile
    답변 주셔서 감사합니다.
    아예 float-left 안에서 빼내고 메뉴가 끝나는 태그 다음에 붙여 놓은것이 위의 코드인건데, 아무런 변화가 없길래 float-right 안에 제일 첫번째에 현재 로고 부분을 넣었는데 아예 없어져버렸습니다.
    음.. 일단 없어졌다는 건 여기를 건드리는게 맞다는 것이니, 더 해보도록하겠습니다.
    감사합니다.
  • profile

    개발자 도구를 통해 조정을 해봤는데요.

    대강 이런 형태를 기본으로 해서 추가적으로 손을 보시면 될 듯합니다.

     

    <div class="header container-fluid" style="text-align: center;">
    <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에 관해 좀 더 연구하면서 직접 작업을 해보시는 게 어떨까 싶습니다.

  • profile profile
    제가 지금 거의 이 구조와 흡사한데, 도전해보고 더 연구해보겠습니다 감사합니다~
  • profile
    저는 equeer 레이아웃 유료버전을 사용하고 있어서인지 질문하신 내용을 레이아웃 설정 페이지에서 바꿀 수 있네요.