Để đóng khung được cho header chúng ta làm theo các bước sau
1) Mở files themes/default/layout/header_extended.tpl
Tìm thẻ và thêm div class css vào
<header>và thẻ</header>Sau đó thêm vào bên trong.
<header>
<div class="wraper">
......
</div>
</div>
Nếu bạn không thích để cái menu section-header-bar thì các bạn có thể làm theo bước sau
Bước 1: Thêm style="background-image: url('{BANNER_SRC}');" vào wraper mới làm bước bên trên.
<div class="wraper" style="background-image: url('{BANNER_SRC}');">Bước 2: Xóa hết đoạn code như sau
<div class="section-header-bar">
<div class="wraper">
<nav class="header-nav">
<div class="header-nav-inner">
<div class="contactDefault">
[CONTACT_DEFAULT]
</div>
<div class="social-icons">
[SOCIAL_ICONS]
</div>
<div class="personalArea">
[PERSONALAREA]
</div>
</div>
<div id="tip" data-content="">
<div class="bg"></div>
</div>
</nav>
</div>
</div>
Sau khi xóa thanh menu top sẽ bị tình trạng này trên mobile
Chúng ta tiếp tục mở file css themes/default/css/style.responsive.css rồi sau đó thêm padding-top: 10px; kích thước tùy bạn điều chỉnh
@media (max-width: 767.98px) {
.second-nav {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-top: 10px;
}
}và thẻ thêm border: none; vào thẻ #menusite .navbar-default
@media (max-width: 767.98px) {
#menusite .navbar-default {
background-color: #428bca;
border-color: #428bca;
border-radius: 0;
min-height: 0;
border: none;
}
}Hoàn thiện
2) Tương tự như trên ta mở file themesdefaultlayoutfooter_extended.tpl
<footer class="section-footer-top" id="footer"><div class="wraper">Sửa lại như sau
<div class="wraper"><footer id="footer">tương tự
</div> </footer>Sửa thành
</footer></div><nav class="section-footer-bottom footerNav2">
<div class="wraper">Sửa thành
<div class="wraper">
<nav class="section-footer-bottom footerNav2"></div>
</nav>Sửa thành
</nav>
</div>Hưởng thành quả
