I want add on our website promo block on the top website every page.

enter image description here

enter image description here

Can anyone help me how to do it?


When I select display block on top header then this block covered the part of my block that I already had. How should I add it to be at the very top and not cover other blocks? enter image description here


Here is source code this block

<div class="top-header-content">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-xs-12">
                    <!-- Static block: header_8_top_left_link -->
                                            <div class="top-custom-link">
<li><a href="mailto:info@czasowewyprzedaze.pl"><span class="icon pe-7s-mail"> </span>info@czasowewyprzedaze.pl</a></li>
<li><a href="https://czasowewyprzedaze.pl/sales/order/history/"><span class="pe-7s-car"> </span>Śledzenie zamówienia</a></li>
<li><a href="https://czasowewyprzedaze.pl/storelocator"><span class="pe-7s-map-marker"> </span>Lokalizator sklepu</a></li>
<p style="text-align: center;"><span style="color: #b07800;"><a href="https://czasowewyprzedaze.pl/customer/account/create/"><span style="color: #b07800;"><b>Zarejestruj konto</b></span></a> aby otrzymać 100 monet na start!</span></p>
</div>                        </div>
                <div class="col-md-4 hidden-sm hidden-xs col-xs-12">
                            <div class="dropdown dropdown-switcher language switcher-language" id="switcher-language">
                                                                                                                    <button class="switcher-toggle dropdown-toggle" type="button" data-toggle="dropdown">
                    Poland                  <i class="fa fa-angle-down" aria-hidden="true"></i>
                                                                    <ul class="dropdown-menu">
                                                <li class="view-en switcher-option">
                        <a href="#" data-post='{"action":"https:\/\/czasowewyprzedaze.pl\/?___store=en&amp;___from_store=pl","data":{"___store":"en","uenc":"aHR0cHM6Ly9jemFzb3dld3lwcnplZGF6ZS5wbC8,"}}'>
                            <img alt="en" src="https://czasowewyprzedaze.pl/pub/static/frontend/Mgs/claue/pl_PL/images/flags/en.png" />English                      </a>
                                                                <li class="view-fr switcher-option">
                        <a href="#" data-post='{"action":"https:\/\/czasowewyprzedaze.pl\/?___store=fr&amp;___from_store=pl","data":{"___store":"fr","uenc":"aHR0cHM6Ly9jemFzb3dld3lwcnplZGF6ZS5wbC8,"}}'>
                            <img alt="fr" src="https://czasowewyprzedaze.pl/pub/static/frontend/Mgs/claue/pl_PL/images/flags/fr.png" />French                       </a>
                                                                <li class="view-de switcher-option">
                        <a href="#" data-post='{"action":"https:\/\/czasowewyprzedaze.pl\/?___store=de&amp;___from_store=pl","data":{"___store":"de","uenc":"aHR0cHM6Ly9jemFzb3dld3lwcnplZGF6ZS5wbC8,"}}'>
                            <img alt="de" src="https://czasowewyprzedaze.pl/pub/static/frontend/Mgs/claue/pl_PL/images/flags/de.png" />German                       </a>
                                                                <li class="view-it switcher-option">
                        <a href="#" data-post='{"action":"https:\/\/czasowewyprzedaze.pl\/?___store=it&amp;___from_store=pl","data":{"___store":"it","uenc":"aHR0cHM6Ly9jemFzb3dld3lwcnplZGF6ZS5wbC8,"}}'>
                            <img alt="it" src="https://czasowewyprzedaze.pl/pub/static/frontend/Mgs/claue/pl_PL/images/flags/it.png" />Italy                        </a>
                                                                                            <li class="view-ru switcher-option">
                        <a href="#" data-post='{"action":"https:\/\/czasowewyprzedaze.pl\/?___store=ru&amp;___from_store=pl","data":{"___store":"ru","uenc":"aHR0cHM6Ly9jemFzb3dld3lwcnplZGF6ZS5wbC8,"}}'>
                            <img alt="ru" src="https://czasowewyprzedaze.pl/pub/static/frontend/Mgs/claue/pl_PL/images/flags/ru.png" />Rusia                        </a>
                                                                <li class="view-at switcher-option">
                        <a href="#" data-post='{"action":"https:\/\/czasowewyprzedaze.pl\/?___store=at&amp;___from_store=pl","data":{"___store":"at","uenc":"aHR0cHM6Ly9jemFzb3dld3lwcnplZGF6ZS5wbC8,"}}'>
                            <img alt="at" src="https://czasowewyprzedaze.pl/pub/static/frontend/Mgs/claue/pl_PL/images/flags/at.png" />Austria                      </a>

here is theme.less

.header {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    position: relative;
    z-index: 99;
    .close-nav-button {
        position: fixed;
        top: 0;
        right: auto;
        z-index: 99999;
        background: none;
        border: none;
        box-shadow: none;
        color: #fff;
        font-size: 40px;
        width: 40px;
        height: 40px;
        .transition( all .3s);
        span {
            display: block;
    .top-header-content {
        background-color: #f6f6f8;
        font-size: 12px;
        clear: both;
        a, button {
            color: #878787;
            &:hover, &:focus {
                color: @base-color;
        .top-middle-header {
            text-align: center;
            padding: 14px 0;
    .dropdown-switcher {
        float: right;
        margin-left: 30px;
        position: static;
        .dropdown-menu {
            margin: 0;
            padding: 0;
            .transition(all 300ms);
            border: none;
            box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
            right: 15px;
            left: auto;
            font-size: 12px;
            min-width: 110px;
            li > a {
                border-bottom: 1px solid #ddd;
                color: #8e8e8e;
                padding: 8px 15px;
                background: none;
                white-space: nowrap;
                &:hover {
                    color: @base-color;
                img {
                    height: auto;
                    margin-right: 7px;
                    margin-top: -4px;
                    width: 16px;
        .switcher-toggle {
            background: none;
            border: none;
            box-shadow: none;
            font-weight: 400;
            padding: 14px 0;
            position: relative;
            .fa-angle-down {
                font-size: 11px;
                margin-left: 2px;
                margin-top: 1px;
        &.open .dropdown-menu {

1 Answer 1


You need create widget and call it page top like below:

Create a widget by below steps:

  1. Login to admin.
  2. Goto Content > Widgets and then add widget
  3. Choose your theme and type CMS Static Block
  4. Under layout updates you need to select the following: a) Display on: All Pages b) Container: Page Top

  5. Under Widget Options select your promo static block.

  • @Sakumar, I have update my topic.
    – Sylvester
    Sep 14, 2018 at 7:18
  • That is a css issue. You need to manage it through css. Issue is because you header is absolute or fixed position. Sep 14, 2018 at 7:41
  • I have update my topic again. Do you have any solution how I should change in css?
    – Sylvester
    Sep 14, 2018 at 8:37
  • Wait let me check. Can you share your url? Sep 14, 2018 at 9:03
  • czasowewyprzedaze.pl
    – Sylvester
    Sep 14, 2018 at 9:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.