그누보드 반응형 head.php 질문입니다.....
본문
반응형 테마 다운로드한 css입니다.
/* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700');
/* === prettify === */
@import url('../js/google-code-prettify/prettify.css');
/* === fontawesome === */
@import url('font-awesome.css');
/* === custom icon === */
@import url('custom-fonts.css');
/* ==== overwrite bootstrap standard ==== */
@import url('overwrite.css');
@import url('animate.css');
/* ===================================
1. General
==================================== */
body {
font-family:'Open Sans', Arial, sans-serif;
font-size:14px;
font-weight:300;
line-height:1.6em;
color:#656565;
}
a:active {
outline:0;
}
.clear {
clear:both;
}
h1,h2, h3, h4, h5, h6 {
font-family:'Open Sans', Arial, sans-serif;
font-weight:700;
line-height:1.1em;
color:#333;
margin-bottom: 20px;
}
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:970px;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
/* ===================================
2. layout
==================================== */
.container {
padding:0 20px 0 20px;
position:relative;
}
#wrapper{
width:100%;
margin:0;
padding:0;
}
.row,.row-fluid {
margin-bottom:30px;
}
.row .row,.row-fluid .row-fluid{
margin-bottom:30px;
}
.row.nomargin,.row-fluid.nomargin {
margin-bottom:0;
}
/* ===================================
3. Responsive media
==================================== */
.video-container,.map-container,.embed-container { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:none; }
.embed-container iframe,
.embed-container object,
.embed-container embed,
.video-container iframe,
.map-container iframe,
.map-container object,
.map-container embed,
.video-container object,
.video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
iframe {
border:none;
}
img.img-polaroid {
margin:0 0 20px 0;
}
.img-box {
max-width:100%;
}
/* ===================================
4. Header
==================================== */
/* --- header -- */
header .navbar {
margin-bottom: 0;
}
.navbar-default {
border: none;
}
.navbar-brand {
color: #222;
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
line-height: 1em;
letter-spacing: -1px;
margin-top: 30px;
padding: 0 0 0 15px;
}
header .navbar-collapse ul.navbar-nav {
float: right;
margin-right: 0;
}
header .navbar-default{
background-color: #FFF;
}
header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
header .nav li a.dropdown-toggle:hover,
header .nav li a.dropdown-toggle:focus,
header .nav li.active ul.dropdown-menu li a:hover,
header .nav li.active ul.dropdown-menu li.active a{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .navbar-default .navbar-nav > .open > a,
header .navbar-default .navbar-nav > .open > a:hover,
header .navbar-default .navbar-nav > .open > a:focus {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
header .navbar {
min-height: 100px;
}
header .navbar-nav > li {
padding-bottom: 30px;
padding-top: 30px;
}
header .navbar-nav > li > a {
padding-bottom: 6px;
padding-top: 5px;
margin-left: 2px;
line-height: 30px;
font-weight: 700;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.dropdown-menu li a:hover {
color: #fff !important;
}
header .nav .caret {
border-bottom-color: #f5f5f5;
border-top-color: #f5f5f5;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: #fff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #fff;
}
.dropdown-menu {
box-shadow: none;
border-radius: 0;
border: none;
}
.dropdown-menu li:last-child {
padding-bottom: 0 !important;
margin-bottom: 0;
}
header .nav li .dropdown-menu {
padding: 0;
}
header .nav li .dropdown-menu li a {
line-height: 28px;
padding: 3px 12px;
}
/* --- menu --- */
header .navigation {
float:right;
}
header ul.nav li {
border:none;
margin:0;
}
header ul.nav li a {
font-size:16px;
border:none;
font-weight:700;
text-transform:uppercase;
}
header ul.nav li ul li a {
font-size:13px;
border:none;
font-weight:300;
text-transform:uppercase;
}
.navbar .nav > li > a {
color: #111;
text-shadow: none;
}
.navbar .nav a:hover {
background:none;
}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
background:none;
font-weight:700;
}
.navbar .nav > .active > a:active,.navbar .nav > .active > a:focus {
background:none;
outline:0;
font-weight:700;
}
.navbar .nav li .dropdown-menu {
z-index:2000;
}
header ul.nav li ul {
margin-top:1px;
}
header ul.nav li ul li ul {
margin:1px 0 0 1px;
}
.dropdown-menu .dropdown i {
position:absolute;
right:0;
margin-top:3px;
padding-left:20px;
}
.navbar .nav > li > .dropdown-menu:before {
display: inline-block;
border-right: none;
border-bottom: none;
border-left: none;
border-bottom-color: none;
content:none;
}
ul.nav li.dropdown a {
z-index:1000;
display:block;
}
select.selectmenu {
display:none;
}
head.php 내용입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<!-- start header -->
<header>
<div id="wrapper">
<p></p>
<div class="container">
<div class="navbar navbar-default navbar-static-top">
<div class="logo text-center">
<a class="navbar-brand">
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.php"><img src="<?php echo G5_THEME_IMG_URL;?>/logo.png" style="" alt=""></a>
</div>
</div>
<!-- 모바일 버튼 끝 -->
<div class="container">
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">메인1 <b class=" icon-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href="/bbs/group_introduction.php">소메뉴1</a></li>
<li><a href="/bbs/group_blog.php">소메뉴2</a></li>
<li><a href="/bbs/board.php?bo_table=schedule">소메뉴3</a></li>
<li><a href="/bbs/group_pric.php">소메뉴4</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">메인2 <b class=" icon-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href="/bbs/group_typography.php">소메뉴1 </a></li>
<li><a href="/bbs/board.php?bo_table=DATA">소메뉴2</a></li>
<li><a href="/bbs/board.php?bo_table=BF">소메뉴3 </a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">메인3 <b class=" icon-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href="/bbs/group_typography.php">소메뉴1 </a></li>
<li><a href="/bbs/board.php?bo_table=TA">소메뉴2</a></li>
<li><a href="/bbs/board.php?bo_table=BeF">소메뉴3 </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- end header -->
질문. 현재 해당 css 적용하여 로고를 집어넣었더니 한줄에 출력되는게 아니라 어긋나서 출력이되며
모바일 화면에서는 메뉴가 로고 아래쪽에 출력이 됩니다. css를 수정해야하는건지 head를 수정해야하는건지 감이오질않아서 고수님들의 조언을 여쭙고자 합니다.
또한 로고를 가운데 넣고 아래 메뉴를 일정간격으로 가운데 정렬을 한다치면 무엇을 수정해야하는지 알려주시면 진짜 정말감사드리겠습니다. ㅠㅠ
