head 부문의 메뉴와 로고의 위치변경 css
본문
테마를 이용해 홈페이지를 만들고 있습니다.
수정건이 있어서 혼자서 해결하려니 css 개념을 완벽히 몰라서 곤란에 처해있답니다.
다름이 아니라
위의 이미지 처럼 로고의 위치와 menu 부문을 변경을 하려고 하는데요.
css 어디를 만져야 하는지 몰라서 그렇답니다. 어느 분 도움을 주시면 감사합니다.
관련 css
/*---------- Wrapper & Basic Layout & Boxed Layout ----------*/
.wrapper {background:#eaeaea}
.basic-layout {background:#fff}
.boxed-layout {padding:0;box-shadow:0 0 5px #bbb;margin-left:auto !important;margin-right:auto !important;background:#fff}
@media (min-width: 992px) {
.boxed-layout .header-nav > .navbar > .container {padding-right:0;padding-left:0}
.boxed-layout .header-nav > .navbar > .container li.menu-icons i.menu-icons-style {margin-right:15px}
}
/* color */
.color-h2 {color:#8FBAFA}
/*---------- Header Top Bar ----------*/
.header-topbar {padding:5px 0;border-bottom:1px solid #ddd;background:#4cacfd;height:32px;position:relative;z-index:100}
.header-topbar ul {text-align:right;margin:0}
.header-topbar ul li a {color:#959595;font-size:12px}
.header-topbar ul li a:hover {color:#000;font-size:12px}
/*---------- Header Title ----------*/
.header-title {position:relative;z-index:100;background:#fff}
.header-h2-logo {height:90px;line-height:65px;float:left;}
.header-h2-logo .h2-text {font-size:28px}
.header-h2-logo .h2-img img {height:90px;width:auto;display:inline-block;vertical-align:left}
/*---------- Header Nav ----------*/
.header-nav {z-index:100;position:relative}
@media (min-width: 768px) and (max-width: 991px) {
.header-nav .menu-container {width:750px}
}
@media (max-width: 1200px) {
.header-nav .navbar {min-height:inherit}
.header-nav {position:static;border-bottom:1px solid #e5e5e5}
.header-nav .menu-container:before, .header-nav .menu-container:after {content:" ";display:table}
.header-nav .menu-container:after {clear:both}
.header-nav .menu-container {margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}
.header-nav > .navbar > .container {width:inherit;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.header-nav > .navbar > .container > .navbar-header, .header-nav > .navbar > .container > .navbar-collapse {margin-left:0;margin-right:0}
}
.header-nav .navbar {border:none;margin-bottom:0}
.header-nav .navbar-toggle {border:none;margin:5px 0 5px 10px;font-size:16px}
.header-nav .navbar-toggle .icon-bar:last-child {margin-bottom:0}
.header-nav .navbar-toggle, .header-nav .navbar-toggle:hover, .header-nav .navbar-toggle:focus {background:inherit}
.header-nav .navbar-collapse {position:relative;background:#076bc9;font-color:#ffffff}
.header-nav .navbar-nav > li > a {font-size:22px;font-weight:bold;letter-spacing:0px}
.header-nav .nav > li > a:hover, .header-nav .nav > li > a:focus {background:inherit}
.header-nav .navbar-nav .dropdown > a:after {display:none}
@media (min-width: 992px) {
.navbar {border-radius:0}
.header-nav .navbar-nav {float:left}
}
/*Nav In Right*/
.header-nav .nav-in-right {float:right;z-index:999;margin-left:-20px;position:relative}
@media (max-width: 350px) {
.header-nav .nav-in-right {display:none}
}
.header-nav .menu-icons-list {margin:0;list-style:none}
.header-nav li.menu-icons {position:relative;display:inline-block}
.header-nav li.menu-icons i.menu-icons-style {color:#fff;width:25px;cursor:pointer;font-size:16px;line-height:44px;text-align:center;display:inline-block}
.header-nav .search-open {top:0;right:0; width:100%;z-index:99;height:auto;display:none;padding:12px 15px;position:absolute;background:#fff}
.header-nav .search-open .form-control {color:#333;border:none;height:26px;font-size:13px;font-weight:400;box-shadow:none;background:#fff;padding:0 20px}
@media (max-width: 991px) {
.header-nav .nav-in-right {float:none;position:absolute;top:-60px;right:5%}
.header-nav .search-open {top:-60px}
.header-nav .search-open .form-control {padding:0;background:#f4f4f4;padding:0 10px;margin-top:3px}
.header-nav li.menu-icons i.menu-icons-style {line-height:52px}
}
@media (min-width: 768px) and (max-width: 991px) {
.header-nav .search-open .form-control {position:relative;overflow:hidden;width:500px;margin:3px auto}
}
.header-nav .search-open .form-control::-moz-placeholder {color:#555}
.header-nav .search-open .form-control:-ms-input-placeholder {color:#555}
.header-nav .search-open .form-control::-webkit-input-placeholder {color:#555}
.header-nav .search-open .form-control:hover, .header-nav .search-open .form-control:active, .header-nav .search-open .form-control:focus {border:none;box-shadow:none}
.header-nav .search-close {z-index:999;position:relative}
.header-nav li.menu-icons i.search-btn {color:#fff}
.header-nav li.menu-icons i.fa-times {color:#444}
/*Responsive*/
@media (max-width: 991px) {
.header-nav .navbar-header {float:none}
.header-nav .navbar-toggle {display:block;float:none;position:absolute;top:-55px;left:5%;margin:0;z-index:10}
.header-nav .navbar-collapse {border-color:#eee}
.header-nav .navbar-collapse.collapse {display:none !important}
.header-nav .navbar-collapse.collapse.in {display:block !important;overflow-y:auto !important}
.header-nav .navbar-nav {margin: 0;float:none !important}
.header-nav .navbar-nav > li {float:none;font-color:#ffffff}
.header-nav .navbar-nav > li > a {padding-top:30px;padding-bottom:40px}
.header-nav .navbar-nav > li > a {color:#444}
.header-nav .navbar-nav > li > .cate-dropdown-open {position:absolute;top:1px;right:0;width:40px;height:40px;line-height:40px;margin:0;padding:0;text-align:center;border:0 none;z-index:9}
.header-nav .navbar-nav > li > .cate-dropdown-open:before {content:"\f067";font-family:FontAwesome;color:#656565}
.header-nav .navbar-nav > li > .cate-dropdown-open:hover {border-top:0}
.header-nav .navbar-nav > li.open > .cate-dropdown-open:before {content:"\f068";font-family:FontAwesome;color:#000}
.header-nav .dropdown-menu.pull-right {float:none !important}
.header-nav .navbar-nav .open .dropdown-menu {border:0;float:none;width:auto;margin-top:0;position:static;box-shadow:none;background-color:transparent}
.header-nav .navbar-nav .open .dropdown-menu > li > a, .header-nav .navbar-nav .open .dropdown-menu .dropdown-header {padding:5px 15px 5px 25px}
.header-nav .navbar-nav .open .dropdown-menu > li > a {line-height:20px}
.header-nav .navbar-nav .open .dropdown-menu > li > a:hover, .header-nav .navbar-nav .open .dropdown-menu > li > a:focus {background-image:none}
.header-nav .navbar-nav .open .dropdown-menu > li > a {color:#777;}
.header-nav .navbar-nav .open .dropdown-menu > li > a:hover, .header-nav .navbar-nav .open .dropdown-menu > li > a:focus {color:#ff2a00;background-color:transparent}
.header-nav .navbar-nav .open .dropdown-menu > .active > a, .header-nav .navbar-nav .open .dropdown-menu > .active > a:hover, .header-nav .navbar-nav .open .dropdown-menu > .active > a:focus {color:#ff2a00;background-color:transparent}
.header-nav .navbar-nav .open .dropdown-menu > .disabled > a, .header-nav .navbar-nav .open .dropdown-menu > .disabled > a:hover, .header-nav .navbar-nav .open .dropdown-menu > .disabled > a:focus {color:#ff2a00;background-color:transparent}
.header-nav .dropdown-menu.no-bottom-space {padding-bottom:0}
.header-nav .navbar-collapse, .header-nav .navbar-collapse .container {padding-left:0 !important;padding-right:0 !important}
.header-nav .navbar-nav > li > a {font-size:13px;padding:12px 5px}
.header-nav .navbar-nav > li a {border-bottom:none;border-top:1px solid #eee}
.header-nav .navbar-nav > li > a:hover {color:#8FBAFA;border-top:1px solid #8FBAFA}
.header-nav .navbar-nav > .open > a, .header-nav .navbar-nav > .open > a:hover, .header-nav .navbar-nav > .open > a:focus {color:#555;background:inherit}
.header-nav .navbar-nav > .active > a, .header-nav .navbar-nav > .active > a:hover, .header-nav .navbar-nav > .active > a:focus {background:inherit;color:#8FBAFA !important}
.header-nav .dropdown .dropdown-submenu > a {font-size:12px;color:#555 !important}
}
@media (min-width: 992px) {
.header-nav .navbar-collapse {padding:0}
.header-nav .navbar {min-height:40px !important}
.header-nav .container > .navbar-header, .header-nav .container-fluid > .navbar-header, .header-nav .container > .navbar-collapse, .header-nav .container-fluid > .navbar-collapse {margin-bottom:-10px}
.header-nav .navbar-nav {top:2px;position:relative}
.header-nav .navbar-nav > li > a {padding:10px 40px;line-height:50px}
.header-nav .navbar-nav > li > a, .header-nav .navbar-nav > li > a:hover, .header-nav .navbar-nav > li > a:focus, .header-nav .navbar-nav > .active > a, .header-nav .navbar-nav > .active > a:hover, .header-nav .navbar-nav > .active > a:focus {color:#fff;font-weight:bold;background:none}
.header-nav .navbar-nav > .open > a, .header-nav .navbar-nav > .open > a:hover, .header-nav .navbar-nav > .open > a:focus {color:#fff}
.header-nav .navbar-nav .dropdown > a:after {top:11px;right:10px;font-size:11px;position:absolute;font-weight:normal;color:#888;display:inline-block;font-family:FontAwesome;content:"\f0d7"}
.header-nav .navbar-nav .dropdown.active > a::after {color:#fff}
.header-nav .navbar-nav .dropdown > a:hover:after {color:#fff}
.header-nav .dropdown-menu {border:none;padding:0;min-width:210px;border-radius:0;background:#fff;z-index:9999 !important;border-top:1px solid #8FBAFA}
.header-nav .dropdown-menu li a {color:#000;font-size:17px;font-weight:normal;padding:10px 40px;border-bottom:1px solid #f8f8f8}
.header-nav .dropdown-menu li:last-child a {border-bottom:0 none}
.header-nav .dropdown-menu .active > a, .header-nav .dropdown-menu li > a:hover {color:#ff2a00;background:inherit;filter:none !important;-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out}
.header-nav .dropdown-menu li > a:focus {background:none;filter:none !important}
.header-nav .navbar-nav > li.dropdown:hover > .dropdown-menu {display:block}
.header-nav .open > .dropdown-menu {display:none}
}
관련 head
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if(G5_COMMUNITY_USE === false) {
include_once(G5_THEME_SHOP_PATH.'/shop.head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
?>
<div class="wrapper">
<?php
if(defined('_INDEX_')) { // index에서만 실행
include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
}
?>
<div class="header-fixed basic-layout">
<?php /* Header Topbar */ ?>
<div class="header-topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline">
<?php if ($is_member) { ?>
<?php if ($is_admin == 'super' || $is_auth) { ?>
<li><a href="<?php echo G5_ADMIN_URL ?>">관리자</a></li>
<?php } ?>
<li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=register_form.php">정보수정</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
<?php } else { ?>
<li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>
<li><a href="<?php echo G5_BBS_URL ?>/login.php">로그인</a></li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
<?php /* End Header Topbar */ ?>
<?php /* Header Title */ ?>
<div class="header-title">
<div class="container">
<?php /* Header Logo */ ?>
<div class="header-h2-logo text-center">
<a href="<?php echo G5_URL ?>" class="h2-img">
<img src="<?php echo G5_THEME_IMG_URL ?>/site_logo.png" alt="<?php echo $config['cf_title']; ?>">
</a>
</div>
</div>
</div>
<?php /* End Header Title */ ?>
<?php /* Header Nav */ ?>
<div class="header-nav nav-background-light header-sticky">
<div class="navbar mega-menu" role="navigation">
<div class="container">
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-align-justify"></span>
</button>
<div class="nav-in-right">
<ul class="menu-icons-list">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
</li>
</ul>
</div>
</div>
<div class="menu-container">
<div class="search-open">
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type="hidden" name="sop" value="and">
<label for="sch_stx" class="sound_only"><strong>검색어 입력 필수</strong></label>
<input type="text" name="stx" id="head_sch_stx" class="sch_stx form-control" maxlength="20" placeholder="전체검색... [검색어를 입력하세요]">
</form>
<script>
function fsearchbox_submit(f)
{
if (f.stx.value.length < 2) {
alert("검색어는 두글자 이상 입력하십시오.");
f.stx.select();
f.stx.focus();
return false;
}
// 검색에 많은 부하가 걸리는 경우 이 주석을 제거하세요.
var cnt = 0;
for (var i=0; i<f.stx.value.length; i++) {
if (f.stx.value.charAt(i) == ' ')
cnt++;
}
if (cnt > 1) {
alert("빠른 검색을 위하여 검색어에 공백은 한개만 입력할 수 있습니다.");
f.stx.select();
f.stx.focus();
return false;
}
return true;
}
</script>
</div>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<?php if (is_array($menu)) { ?>
<?php foreach ($menu as $key => $menu_1) { ?>
<li class="<?php if ($menu_1['active']) echo 'active';?> <?php if ($menu_1['submenu']) echo 'dropdown'; ?>">
<a href="<?php echo $menu_1['me_link']; ?>" target="_<?php echo $menu_1['me_target']; ?>" class="dropdown-toggle disabled" <?php echo G5_IS_MOBILE && $menu_1['submenu'] ? 'data-toggle="dropdown"' : 'data-hover="dropdown"';?>>
<?php echo $menu_1['me_name']?>
</a>
<?php if (is_array($menu_1['submenu'])) { ?>
<a href="#" class="cate-dropdown-open dorpdown-toggle hidden-lg hidden-md" data-toggle="dropdown"></a>
<?php } ?>
<?php $index2 = 0; $size2 = count($menu_1['submenu']); ?>
<?php if (is_array($menu_1['submenu'])) { ?>
<?php foreach ($menu_1['submenu'] as $subkey => $menu_2) { ?>
<?php if ($index2 == 0) { ?>
<ul class="dropdown-menu">
<?php } ?>
<li class="dropdown-submenu <?php if ($menu_2['active']) echo 'active';?>">
<a href="<?php echo $menu_2['me_link']; ?>" target="_<?php echo $menu_2['me_target']; ?>">
<span class="submenu-marker"></span>
<?php echo $menu_2['me_name']; ?>
<?php if ($menu_2['new']) { ?>
<i class="far fa-check-circle color-red margin-left-5"></i>
<?php } ?>
<?php if ($menu_2['sub'] == 'on') { ?>
<i class="fas fa-angle-right sub-caret hidden-sm hidden-xs"></i><i class="fas fa-angle-down sub-caret hidden-md hidden-lg"></i>
<?php } ?>
</a>
<?php $index3 = 0; $size3 = count($menu_2['subsub']); ?>
<?php if (is_array($menu_2['subsub'])) { ?>
<?php foreach ($menu_2['subsub'] as $ssubkey => $menu_3) { ?>
<?php if ($index3 == 0) { ?>
<ul class="dropdown-menu">
<?php } ?>
<li class="dropdown-submenu <?php if ($menu_3['active']) echo 'active';?>">
<a href="<?php echo $menu_3['me_link']; ?>" target="_<?php echo $menu_3['me_target']; ?>">
<span class="submenu-marker"></span>
<?php echo $menu_3['me_name']; ?>
<?php if ($menu_3['new']) { ?>
<i class="far fa-check-circle color-red margin-left-5"></i>
<?php } ?>
<?php if ($menu_3['sub'] == 'on') { ?>
<i class="fas fa-angle-right sub-caret hidden-sm hidden-xs"></i><i class="fas fa-angle-down sub-caret hidden-md hidden-lg"></i>
<?php } ?>
</a>
</li>
<?php if ($index3 == $size3 - 1) { ?>
</ul>
<?php } ?>
<?php $index3++; } ?>
<?php } ?>
</li>
<?php if ($index2 == $size2 - 1) { ?>
</ul>
<?php } ?>
<?php $index2++; } ?>
<?php } ?>
</li>
<?php } ?>
<?php } else { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
답변을 작성하시기 전에 로그인 해주세요.