안녕하세요! Dean입니다. 오늘은 저번 강좌에 이어
검색창, 소셜링크 항목, 텍스트도구, 프린트버튼을 상단메뉴로 옮겨보겠습니다.
instructions
먼저 skin.html 에서
<section class="container skeleton-mid-banner"> 부터 </section><!-- /. container skeleton-mid-banner --> 까지 삭제해 줍니다.
그리고 나서 </nav> 아래 부분에 아래의 코드를 복사해서 붙여넣어 줍니다.
여기까지 하시면 위와같이 아이콘들이 상단 메뉴로 올라가게 됩니다.
bootstrap.css 파일 수정
instructions
그리고 마크쿼리 스킨폴더에 들어있는 bootstrap.css 파일을 에디터 프로그램으로 열어주신 후 .col-sm-8 항목을 찾아 주신후 아래와 같이 바꾸어 줍니다.
.col-sm-8 {
width: 10%;
float: right;
padding-top: 13px;
}instructions
.input-group 항목을 찾아 주신후 아래와 같이 바꾸어 줍니다.
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right;
width: 200px;
padding-top: 6px;수정 된 bootstrap.css파일을 관리-HTML/CSS 편집-파일업로드에서 업로드를 해줍니다.style.css 파일 수정
instructions
HTML/CSS 편집 메뉴의 Style.css 항목에서 .nav항목을 찾으신 후 아래와 같이 수정해 줍시다.
.nav {
position: relative;
font-size: 14px;
font-weight: 900;
position: absolute;
}instructions
.skeleton-nav 항목을 찾으신 후 아래와 같이 수정해 줍시다.
.skeleton-nav {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 0px solid #ccc;
background-color: #fff;
z-index: 1030;
height: 51px;
}instructions
.responsive-right2left 항목을 찾으신 후 아래와 같이 수정해 줍시다.
.responsive-right2left {
float: right;
padding-top: 13px;
}
완성 되었습니다. 수고하셨습니다.
