Какой вопрос такой и ответ! Я понимаю краткость сестра таланта но не в данном случае.
Задачи нужно описывать более конкретно и понятно а не кидать ссылки
1) подобные что это шапка? редактируйте head и headtop и дописывайте в css или вот тут вам сделают
2) опять вот тут вам сделают

от меня лично: Если задаете вопрос первым делом можно воспользоваться поиском

Добавить соответствующие элементы в шаблон, не сложно ведь…

Пример для шаблона Synio:
1. Добавить CSS стили в css/navs.css

/* Кнопка */
.b-button img{
 display: inline;
 position: absolute;
 right: 20px;
 top: -10px;
 z-index: 999;
 width: 70px;
}

/* Затемнение фона */
.b-overlay{
 display: none;
 position: fixed;
 top: 0;
 height: 100%;
 width: 100%;
 background: rgba(0, 0, 0, 0.86);
 overflow: auto;
 z-index: 100;
}
.b-wrap{
 color: #fff;
 text-align: center;
 max-width: 1100px;
 margin: 0 auto;
}
.b-wrap ul.b-wrap-nav{
 border-bottom: 1px solid #575757;
 text-transform: capitalize;
 padding: 150px 0px 100px;
}
.b-wrap ul.b-wrap-nav > li{
 font-size: 22px;
 display: inline-block;
 vertical-align: top;
 width: 24%;
 position: relative; 
}
.b-wrap ul.b-wrap-nav > li a{
 color: #d6d6d6;
 display: block;
 padding: 8px 0;
 text-decoration: none;
}
.b-wrap ul.b-wrap-nav > li a:hover{
 color: #fff;
}
.b-wrap ul.b-wrap-nav ul{
 padding: 20px 0;
}
.b-wrap ul.b-wrap-nav ul li{
 display: block;
 font-size: 16px;
 width: 100%;
 color: #919191;
}
.b-wrap ul.b-wrap-nav ul li a{
 color: #919191;
}
.b-social{
 color: #c1c1c1;
 font-size: 16px;
 padding: 20px;
}

@media screen and (max-width: 48em) {
 .b-wrap ul.b-wrap-nav > li{
 width: 100%;
 padding: 20px 0;
 border-bottom: 1px solid #575757;
 }
 .b-wrap ul.b-wrap-nav{
 padding: 30px 0px 0px;
 }
 nav ul{
 opacity: 0;
 visibility: hidden;
 }
 .b-button{
 top: 0;
}
}

2. Добавить этот код в header.tpl после {hook run='body_begin'}:

<div class="b-button">
        <a href="#">
            <img class="b-btn-open" src="{cfg name="path.static.skin"}/images/btn-hamburger.png" alt="">
            <img class="b-btn-close" src="{cfg name="path.static.skin"}/images/btn-close.png" alt="">

        </a>
    </div>
	<div class="b-overlay">
        <div class="b-wrap">
            <ul class="b-wrap-nav">
                <li><a href="#">Company</a>
                    <ul>
                        <li><a href="#">About</a>
                        </li>
                        <li><a href="#">Blog</a>
                        </li>
                        <li><a href="#">Workplace</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Services</a>
                    <ul>
                        <li><a href="#">Web Design</a>
                        </li>
                        <li><a href="#">Consultanct</a>
                        </li>
                        <li><a href="#">Products</a>
                        </li>
                        <li><a href="#">Centers</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Social</a>
                    <ul>
                        <li><a href="#">Facebook</a>
                        </li>
                        <li><a href="#">Twitter</a>
                        </li>
                        <li><a href="#">Google Plus</a>
                        </li>
                        <li><a href="#">LinkedIn</a>
                        </li>
                        <li><a href="#">WhatsApp</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Contact</a>
                    <ul>
                        <li><a href="#">Address</a>
                        </li>
                        <li><a href="#">Phone</a>
                        </li>
                        <li><a href="#">Email</a>
                        </li>
                        <li><a href="#">Map</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="b-social">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, recusandae, magnam, sapiente, iure deleniti repudiandae est tempora repellat fugiat aliquid nihil assumenda non placeat cum minus aut qui. Ipsa, aut.
            </div>
        </div>
    </div>


    <script>
        $(document).ready(function () {
            $('.b-btn-close').fadeOut(200);
            var open = false;
            $('.b-button a').on('click', function () {
                if (open == false) {
                    $('.b-overlay, .b-btn-close').fadeIn(200);
                    $('nav ul li, .b-btn-open').fadeOut(200);
                    open = true;
                } else {
                    $('.b-overlay, .b-btn-close').fadeOut(200)
                    $('nav ul li, .b-btn-open').fadeIn(200);
                    open = false;
                }
            });
            $('.b-overlay').on('mouseup', function () {
                $('.b-overlay, .b-btn-close').fadeOut(200);
                $('nav ul li, .b-btn-open').fadeIn(200);
                open = false;
            });
            $('.b-wrap').on('mouseup', function () {
                return false;
            });
        })
    </script>

3. Загрузить эти файлы в skin/synio/images/ и назвать соответствующе btn-hamburger.png и btn-close.png