W niniejszym artykule dowiesz się, w jaki sposób zmodyfikować wariant 1 lub 2 nagłówka w Topazie, by były one „przyklejonymi” nagłówkami podczas przewijania strony.
Wskazówka
W wersji 2021 powstał również trzeci wariant nagłówka. „Przyklejenie” tego nagłówka jest już zaimplementowane i nie trzeba dokonywać żadnych modyfikacji kodu.
Wskazówka
W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.
Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od „.headerSection{color:{{settings.headerFontColor}}” a kończący się na „headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:
Modyfikacje dla pierwszego wariantu nagłówka
Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-1.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka.
Kod w powyższym pliku podmień na następujący:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 |
{% assign categories = page.GroupNodes %} {% assign lngCount = config.Languages | Size -%} {% assign currentLang = config.Languages[page.LanguageId] -%} <div class="headerBackground hidden"></div> <header class="headerSection headerSection__bg pageHeader-js"> <div class="headerSection__row"> <div class="headerSection__row"> <span class="header__icon mobileMenuIcon headerSection__iconsMenuItem showMenuSection-js" title="{{ translations.Hea_Menu }}"> <svg><use xlink:href="css/img/icons-sprite.svg#bars-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span> </span> <a aria-label="homepage-url" class="headerSection__logo" href="{{config.DefinedPages.Home.Url}}"> {% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}} </a> <div class="headerSection__iconsMenu"> <span class="header__icon mobileSearchIcon headerSection__iconsMenuItem showSearchSection-js" title="{{ translations.Com_Search }}"> <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Com_Search }}</span> </span> {% if usr.Authenticated -%} <span class="headerSection__iconsMenuItem hideOnMobile"> <a class="header__customer-profile header__icon" aria-label="customerProfile" href="{{ config.DefinedPages.CustomerProfile.Url }}" title="{{ translations.Hea_CustomerProfile }}"> <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Hea_CustomerProfile }}</span> </a> </span> <div class="header__icon inputs-container-js hideOnMobile headerSection__iconsMenuItem" title="{{ translations.Cpr_Logout }}"> <input aria-label="logout" type="hidden" name="__action" value="Customer/Logout"> <span class="customerLogout-js"> <svg><use xlink:href="css/img/icons-sprite.svg#power-off-{{settings.iconStyle}}"></use></svg> </span> <span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span> </div> {% else -%} <a class="header__login header__icon headerSection__iconsMenuItem" aria-label="loginIcon" href="{{ config.DefinedPages.Login.Url }}" title="{{ translations.Log_Login }}" rel="nofollow"> <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Log_Login }}</span> </a> {% endif -%} <span class="headerSection__iconsMenuItem hideOnMobile {% if customer.Cart.Count > 0 -%} activeCart {% endif -%}" title="{{ translations.Crt_Cart }}"> <a aria-label="order-url" class="header__cart header__icon" href="{{ config.DefinedPages.Order.Url }}"> <svg><use xlink:href="css/img/icons-sprite.svg#{{settings.cartIconStyle}}-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text"><i>{{ translations.Crt_Cart }}</i> (<span class="incrementProductsInCart-js" data-count="{{customer.Cart.Count}}">{% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}</span>)</span> </a> </span> </div> </div> <div class="headerSection__mainMenu headerSection__row headerMainMenu-js"> <div class="headerSection__mainMenu__navLinks"> <span class="headerSection__mainMenu__closeBtn mainMenuMobileCloseBtn-js"> <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg> <span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span> </span> {% if header.Nodes[0] -%} <span class="mainMenu__navLink header__icon openCategoryMenu-js"> {{ translations.Com_Categories }} <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg> </span> {% endif -%} <div class="headerSection__navigation"> <nav class="mainNavigation mainNavigation__links mainNavigation-js"> <div class="mainNavigation__categories"> <ul> {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize > 0 -%} <li> <span class="mainNavigation__category"> {{ category | A }} <span class="header__icon"> <svg class="header__icon--arrowDown openUndercategoryMenu-js"> <use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use> </svg> </span> </span> <ul> {% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%} {% if undercategoriesSize > 0 -%} <li> <span class="mainNavigation__undercategory"> <a aria-label="undercategoryName" href="{{undercategory.Url}}"><span>{{undercategory.Name}}</span></a> <span class="header__icon"> <svg class="header__icon--arrowDown openUndercategoryMenu-js"> <use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use> </svg> </span> </span> {% if undercategory.Nodes -%} <ul> {% for underundercategory in undercategory.Nodes -%} {% assign underundercategoriesSize = category.Groups | Size -%} {% if underundercategoriesSize > 0 -%} <span class="mainNavigation__underundercategory"> <a aria-label="undercategoryName" href="{{underundercategory.Url}}"><span>{{underundercategory.Name}}</span></a> </span> {% endif -%} {% endfor -%} </ul> {% endif -%} </li> {% endif -%} {% endfor -%} <li> <ul class="mainNavigation__categories__noChilds"> {% for undercategory in category.Groups -%} {% assign categoriesSize = undercategory.Nodes | Size -%} {% if categoriesSize == 0 -%} <li> <span class="mainNavigation__category"> {{ undercategory | A }} </span> </li> {% endif -%} {% endfor -%} </ul> </li> </ul> </li> {% endif -%} {% endfor -%} <li> <ul class="mainNavigation__categories__noChilds"> {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize == 0 -%} <li> <span class="mainNavigation__category"> {{ category | A }} </span> </li> {% endif -%} {% endfor -%} </ul> </li> </ul> {% assign name = 'menuBanner' -%} {% if config.Banners[name].Images[0].Link != '' -%} <a class="imageLink" href="//{{config.Banners[name].Images[0].Link}}" if true target="_blank" endif rel="noopener"> {% endif -%} <div class="mainNavigation__image"> {% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: '', bannerAlt}} {% endif -%} <div class="menuBanner__content"> <p class="menuBanner__title">{{config.Banners[name].Images[0].Heading}}</p> <p class="menuBanner__text">{{config.Banners[name].Images[0].Text}}</p> </div> {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} <p class="banner__size">220x295</p> {% endif -%} </div> {% if config.Banners[name].Images[0].Link != '' -%} </a> {% endif -%} </div> </nav> </div> <span class="mainMenu__navLink header__icon openPagesMenu-js"> {{ translations.Hea_Pages }} <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg> </span> <div class="headerSection__navigation"> <nav class="mainNavigation mainNavigation__sites sitesNavigation-js"> <ul> <li><a aria-label="definedpages-about" href="{{ config.DefinedPages.About.Url }}"><span>{{config.DefinedPages.About.Name}}</span></a></li> <li><a aria-label="definedpages-payment" href="{{ config.DefinedPages.Payment.Url }}" rel="nofollow"><span>{{config.DefinedPages.Payment.Name}}</span></a></li> <li><a aria-label="definedpages-shipping" href="{{ config.DefinedPages.Shipping.Url }}" rel="nofollow"><span>{{config.DefinedPages.Shipping.Name}}</span></a></li> <li><a aria-label="definedpages-terms" href="{{ config.DefinedPages.Terms.Url }}" rel="nofollow"><span>{{config.DefinedPages.Terms.Name}}</span></a></li> </ul> </nav> </div> <span class="mainMenu__navLink">{{ config.DefinedPages.Contact | A }}</span> {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} <span class="mainMenu__navLink header__icon openLookbooksMenu-js"> {{ translations.Lookbook }} <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg> </span> <div class="headerSection__navigation"> <nav class="mainNavigation mainNavigation__lookbooks lookbooksNavigation-js"> <ul> {% for lookbook in config.Lookbook.List -%} <li><a aria-label="lookbook" href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li> {% endfor -%} </ul> </nav> </div> {% elseif lookbooksQuantity == 1 or fakeLookbook -%} <span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span> {% endif -%} </div> <div class="headerSection__shopData"> {% if config.Shop.Contact.PhoneNo != '' -%} <span> <svg class="svgIcon footer__icon--rotate100"><use xlink:href="css/img/icons-sprite.svg#phone-{{settings.iconStyle}}"></use></svg> <a aria-label="contact-phone" href="tel:{{config.Shop.Contact.PhoneNo}}">{{config.Shop.Contact.PhoneNo}}</a> </span> {% endif -%} {% if config.Shop.Contact.Email != '' -%} <span> <svg class="svgIcon svgIcon--envelope"><use xlink:href="css/img/icons-sprite.svg#envelope-{{settings.iconStyle}}"></use></svg> <a aria-label="contact-mail" href="mailto:{{config.Shop.Contact.Email}}">{{ config.Shop.Contact.Email }}</a> </span> {% endif -%} <span class="uppercase headerSection__languageAndCurrencyMenu__openBtn openLanguageAndCurrencyMenu-js"> <svg class="svgIcon mobileSvgIcon"><use xlink:href="css/img/icons-sprite.svg#globe-{{settings.iconStyle}}"></use></svg> {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }} </span> <div class="headerSection__languageAndCurrencyMenu languageAndCurrencyMenu-js"> <div class="languageAndCurrencyMenu__container"> <div class="languageAndCurrencyMenu__language form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js"> <span class="languageAndCurrencyMenu__title">{{ translations.Prf_Language }}</span> <input aria-label="languageChange" type="hidden" name="__action" value="Customer/LanguageChange"/> {% for language in config.Languages -%} <input aria-label="currencyChange" id="lang-{{language.Id}}" class="checkbox-input customerCurrencyChange-js" value="{{language.Id}}" type="radio" name="languageId" {% if page.LanguageId == language.Id -%} checked {% endif -%}/> <label for="lang-{{language.Id}}"> <span class="checkBoxes__checkIcon"> <svg><circle cx="7" cy="8" r="2"/></svg> </span> {{ language.Language }} </label> {% endfor -%} </div> <div class="languageAndCurrencyMenu__currency form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js"> <span class="languageAndCurrencyMenu__title">{{ translations.Com_Currency }}</span> <input aria-label="currencyChange" type="hidden" name="__action" value="Customer/CurrencyChange"/> {% for currency in config.Currencies -%} <input aria-label="languageChange" id="curr-{{currency.Code}}" class="checkbox-input customerLanguageChange-js" value="{{currency.Code}}" type="radio" name="currency" {% if customer.Currency == currency.Code -%} checked {% endif -%}/> <label for="curr-{{currency.Code}}"> <span class="checkBoxes__checkIcon"> <svg><circle cx="7" cy="8" r="2"/></svg> </span> {{ currency.Code }} </label> {% endfor -%} </div> </div> </div> </div> {% if usr.Authenticated == false -%} <a aria-label="login-register-button" class="primary-action-button customerLogin__mobileButton" href="{{config.DefinedPages.Login.Url}}" rel="nofollow"> <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg> {{translations.Com_Login}} / {{translations.Registration}} </a> {% endif -%} </div> </div> <div class="headerSection__searchForm headerSearchForm-js inputs-container-js" title="{{translations.Com_Search}}"> <input aria-label="get-search" type="hidden" name="__action" value="Get/Search" /> <div class="headerSection__mainMenu__closeBtn "> <svg class="svgIcon mainMenuMobileCloseSearchBtn-js"><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg> </div> <input aria-label="search" type="search" name="search" class="headerSection__searchForm__phrase searchFormPhrase-js getSearchAutocomplete-js" placeholder="{{translations.SearchInShop}}" autocomplete="off" required /> <button aria-label="searchButton" class="headerSection__searchForm__btn header__icon getSearch-js enterKeyTrigger-js"> <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg> </button> <button aria-label="searchButton-mobile" class="headerSection__searchForm__searchButtonMobile hidden header__icon getSearch-js enterKeyTrigger-js"> {{translations.Com_Search}} </button> </div> </header> {% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%} <div class="configMessages configMessages__header {% if index > 1 -%} hidden {% endif -%}"> <span id="{{ cookieName }}" class="configMessages__btn configMessages__btn-js" data-days="{{ msg.Days }}"> <svg><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg> </span> {% if msg.Title != '' -%} <div class="configMessages__title"> {% if msg.Url != '' -%} <a aria-label="message" href="{{ msg.Url }}">{{ msg.Title }}</a> {% else -%} {{ msg.Title }} {% endif -%} </div> {% endif -%} <div class="configMessages__message">{{ msg.Message }}</div> </div> {% endif -%} {% endif -%} {% endfor -%} {% if page.PageId == 6 and page.QueryString contains "?fav=1" -%} {% assign headerMobileReturnButton = 1 -%} {% elseif page.PageId == 4 -%} {% assign headerMobileReturnButton = 1 -%} {% else -%} {% assign headerMobileReturnButton = 0 -%} {% endif -%} <div class="mobileCartReturnButton {% if headerMobileReturnButton == 0 -%} hidden {% endif -%}"> <a href="{{config.Pages[0].Url}}"><svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#times-{{settings.iconStyle}}"></use></svg></a> {% if page.PageId == 4 -%}<span class="mobileCartItemsCounter">{{translations.CartContent}} ({{cart.Products | Size }})</span>{% endif -%} </div> |
Następnie należy zmodyfikować pliki css. W tym celu najpierw otwórz plik css/layout0.css. Wyszukaj blok kodu zaczynający się od „.headerSection{color:{{settings.headerFontColor}};” a kończący się na „.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none}”. Usuń cały ten blok kodu, a w jego miejsce wklej nastepujący:
|
0 1 2 |
.headerBackground{background-color:{{settings.headerBgColor}};height:120px;width:100%;margin:0;padding:0}.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:120px;box-sizing:border-box;position:relative;z-index:13}.headerSection.frozenHeader{position:fixed !important;top:0;box-shadow:2px 1px 4px 0 #b0b0b0}.headerSection.frozenHeader>.scrollHeader{padding-top:0 !important;padding-bottom:65px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__logo{top:17px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__iconsMenu{bottom:-55px !important}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:120px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between;position:relative}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;z-index:1;display:flex;align-items:center;justify-content:center}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{max-height:36px;width:auto;max-width:100px}.headerSection .headerSection__logo.longLogo{top:0;left:150px}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__row{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .mainNavigation{display:none}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative;padding:10px 0 0}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-2px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__navLinks.longLogo{top:5px}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px;position:absolute;bottom:-37px;right:0;z-index:1}.headerSection .headerSection__iconsMenu .mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .iconsMenuItem__text i{font-style:normal}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__iconsMenu.longLogo{bottom:-70px}.headerSection .headerSection__searchForm{position:absolute;top:100px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;display:none;padding:30px 15px;margin:0;overflow:hidden;box-sizing:border-box;text-align:center;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .headerSection__searchForm__searchButtonMobile{display:none}.headerSection .scrollSearchForm{top:70px !important}.headerSection .headerSection__searchForm__phrase{max-width:436px;width:100%;height:36px;padding:0 0 11px;box-sizing:border-box;border-bottom:1px solid {{settings.linkFontColor}};color:{{settings.headerFontColor}};background-color:transparent}.headerSection .headerSection__searchForm__btn{position:absolute;top:30px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:none;display:none}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{background-color:{{settings.headerBgColor}};display:block;margin:0 auto;padding:20px 0;top:45px;position:relative;box-sizing:border-box;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2)}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;margin:0 auto;max-width:436px;width:100%;border-bottom:1px solid #f2f2f2;padding:15px 0;font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;position:absolute;top:-40px;right:0}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase;z-index:2}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.breadcrumbsFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;margin:10px 0 5px;opacity:.5}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none} |
W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę „@media only screen and (max-width: 767px){.headerSection{height:60px}”. Usuń ją, a w jej miejsce wklej następującą:
|
0 1 2 |
@media only screen and (max-width: 767px){.headerSection{height:60px}.headerSection .headerSection__mainMenu__closeBtn{display:block}.headerSection .header__icon svg{width:18px;height:18px}.headerSection .header__icon.header__login{display:none}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection .headerSection__shopData{position:absolute;top:30px;right:30px;margin-right:55px}.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:none}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 35px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none;position:fixed;top:0;bottom:56px;overflow-y:auto;overflow-x:hidden;z-index:1}.headerSection .headerSection__mainMenu{position:absolute;top:50px;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{text-align:left;position:absolute;padding:15px;width:105px;box-sizing:border-box;left:20px;top:-40px;font-size:16px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};background-color:{{settings.headerBgColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn span{display:none}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn svg{margin-bottom:-3px;margin-top:50px}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 22px)}.headerSection .headerSection__mainMenu .mainNavigation__category a{font-weight:600}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:50px 40px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .header__icon.mobileMenuIcon{display:none}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block;margin-top:5px}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text i{display:none}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:15px}.headerSection .mobileMenuIcon .iconsMenuItem__text{text-transform:uppercase}.headerSection .mobileMenuIcon svg{top:3px;margin:4px 0 0;width:20px;height:20px}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;font-size:10px;position:static;bottom:22px;right:35px}.headerSection .headerSection__searchForm{position:fixed;top:45px;background-color:{{settings.headerBgColor}};left:0;right:0;width:100%;max-width:100%;height:100%;padding:35px 0 0;margin:-45px 0 0 0}.headerSection .headerSection__searchForm svg{fill:{{settings.linkFontColor}};display:block;margin-left:33px;margin-bottom:25px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__btn{background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__phrase{margin:10px 0;width:calc(100% - 71px);max-width:calc(100% - 71px)}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:15px;position:relative;border-bottom:1px solid {{settings.borderColor}};margin-left:23px;padding-bottom:15px}.headerSection .headerSection__shopData .mobileSvgIcon{margin-left:0}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:block}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}.headerSection .hideOnMobile{display:none}}.mobileCartReturnButton{background-color:{{settings.primaryPageBgColor}};padding:31px 0 20px;display:block;width:100%;position:absolute;top:0;z-index:15}.mobileCartReturnButton svg{width:16px;height:16px;fill:{{settings.linkFontColor}};padding-left:30px;padding-right:17px}.mobileCartReturnButton .mobileCartItemsCounter{font-size:14px;font-weight:300;color:{{settings.primaryFontColor}};position:absolute;top:30px} |
Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: „@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}”. Usuń ją i wklej w jej miejsce następującą:
|
0 1 2 |
@media screen and (min-width: 769px) and (max-width: 1000px){.headerSection.frozenHeader>.scrollHeader{flex-direction:row;justify-content:flex-start}.headerSection.frozenHeader>.scrollHeader .headerSection__row{justify-content:flex-start;flex-wrap:wrap;margin-top:14px}.headerSection.frozenHeader>.scrollHeader .headerMainMenu-js{margin-left:2%}.headerSection.frozenHeader .headerSection__iconsMenu{position:fixed;top:20px;right:3%}.headerSection.frozenHeader .mainNavigation__links{position:fixed;top:70px;left:3%}}@media screen and (min-width: 769px) and (max-width: 840px){.headerSection.frozenHeader .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:8px !important}}@media screen and (min-width: 769px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:15px;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:15px;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:15px}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .imageLink{width:fit-content;height:fit-content}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden;background-color:#f2f2f2;position:relative}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content{position:absolute;top:50%;left:3%;max-height:50%}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__title{margin:0;padding:0;color:{{settings.bannerFontColor}};font-size:16px;font-weight:500}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0;font-size:14px}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__categories ul li ul li{padding-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{text-transform:none;width:100%;font-weight:500;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover{color:{{settings.headerFontColor}};font-weight:600}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__underundercategory a{font-weight:300}.headerSection .mainNavigation__links .mainNavigation__category a{font-size:12px;font-weight:500;width:100%;display:inline-block}}@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}@media screen and (min-width: 950px){.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:inline-block}}@media screen and (min-width: 1000px){.headerSection .mainNavigation__links{min-width:880px;left:-150px}.headerSection .headerSection__iconsMenu{bottom:-62px;right:0}.headerSection .headerSection__mainMenu__navLinks{top:-7px;left:150px}.headerSection .headerSection__logo{left:0;top:25px;position:absolute}}@media screen and (min-width: 1220px){.headerSection .mainNavigation__links{min-width:1100px}}@media screen and (min-width: 1400px){.headerSection.headerSection__bg>.headerSection__row{max-width:1400px;margin:0 auto}.headerSection .mainNavigation__links{left:0}}@media screen and (max-width: 1000px){.frozenHeader .headerSection__logo{margin-top:5px !important}} |
Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę „var headerFunctions = {„. Należy usunąć cały blok kodu, początwszy od tej linijki, aż do „};”. Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: „ui.showFooterSection = function() {„. W miejsce powyższego bloku kodu należy wkleić następujący:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
var headerFunctions = { init: function () { headerFunctions.events(); }, // Function that sets the menu position according to the width of the logo setMenuPosition: function() { var logo = $('img[src="logo.png"]'); var logoWidth = logo.width(); if(logoWidth > 120) { logo.parent().addClass('longLogo'); $('.headerSection__mainMenu__navLinks').addClass('longLogo'); $('.headerSection__iconsMenu').addClass('longLogo'); } }, events: function () { var pageHeader = $('.pageHeader-js'); pageHeader.on('click', '.showSearchSection-js', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $('.searchFormPhrase-js').focus(); }); pageHeader.on('click', '.showMenuSection-js', function() { $('.pageHeader-js .headerMainMenu-js').toggle(200); }); pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() { $('.pageHeader-js .headerMainMenu-js').hide(200); }); $(document).on('click', function (e) { //categories list if ($(e.target).closest('.openCategoryMenu-js').length === 0 && $(e.target).closest('.mainNavigation-js').length === 0 && $(e.target).closest($('.mainNavigation-js').children()).length === 0 && $(e.target).closest('.openPagesMenu-js').length === 0) { if($('.mainNavigation-js').css('display') != 'none') { $('.mainNavigation-js').toggle(200); $('.openCategoryMenu-js').removeClass('activeButton-js'); } } //pages list if($(e.target).closest('.openPagesMenu-js').length === 0 && $(e.target).closest('.sitesNavigation-js').length === 0 && $(e.target).closest($('.sitesNavigation-js').children()).length === 0 && $(e.target).closest('.openCategoryMenu-js').length === 0) { if($('.sitesNavigation-js').css('display') != 'none') { $('.sitesNavigation-js').toggle(200); $('.openPagesMenu-js').removeClass('activeButton-js'); } } //search form if( $(e.target).closest('.showSearchSection-js').length === 0 && $(e.target).closest('.headerSearchForm-js').length === 0 && $(e.target).closest('.searchForm__searchAutocomplete-js').length === 0 && $(e.target).closest($('.searchForm__searchAutocomplete-js').children()).length === 0) { if($('.headerSearchForm-js').css('display') != 'none') { $('.searchForm__searchAutocomplete-js').remove(); $('.headerSearchForm-js').toggle(200); } } }); pageHeader.on('click', '.mainMenuMobileCloseSearchBtn-js', function() { $('.pageHeader-js .headerSearchForm-js').hide(200); }); pageHeader.on('input', '.searchFormPhrase-js', function() { if($(this).val().length > 0) { $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden'); } else { $('.headerSection__searchForm__searchButtonMobile').addClass('hidden'); } }); pageHeader.on('click', '.openCategoryMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').toggle(200); $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); app.loadImages(); }); pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openPagesMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .sitesNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openLookbooksMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .headerSearchForm-js').hide(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('change', '.customerLanguageChange-js', function(e) { if($(this).is(':checked')) {app.customerLanguageChange(e)} }); pageHeader.on('change', '.customerCurrencyChange-js', function(e) { if($(this).is(':checked')) {app.customerCurrencyChange(e)} }); pageHeader.on('click', '.openUndercategoryMenu-js', function(e) { var undercategory = $(e.currentTarget).closest('li').find('ul').first(); $(undercategory).toggle(200); }); $('img[data-src="logo.png"]').on('load', function(e) { headerFunctions.setMenuPosition(); }); $(window).ready(function(e) { $('html, body').animate({scrollTop : 0},10); $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 10); }); $(window).scroll(function(e) { if($(this).scrollTop() > 100 && $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.headerSection__searchForm').addClass('scrollSearchForm'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection__searchForm').removeClass('scrollSearchForm'); $('.headerSection').css('height', '120px'); } }); $(window).on('resize', function(e) { if($(window).width() < 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection__searchForm').removeClass('scrollSearchForm'); $('.headerSection').css('height', '60px'); } else { if($(this).scrollTop() > 100 && $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.headerSection__searchForm').addClass('scrollSearchForm'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection__searchForm').removeClass('scrollSearchForm'); $('.headerSection').css('height', '120px'); } } }); } }; |
Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię ” if (window.pageYOffset > (topPosition)) {„. Linia ta znajduje się w funkcji, której poczatkiem jest linia „$(window).on(’scroll’, function() {” a końcem linia „});”. Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(window).on('scroll', function() { if($('.frozenHeader').index()) { var headerHeight = parseInt($('.frozenHeader').css('height') + 5); } if (window.pageYOffset > (topPosition)) { topSection.style.position = 'sticky'; topSection.style.zIndex = '12'; if($('.frozenHeader').index()) { topSection.style.top = headerHeight + "px"; } else { topSection.style.top = 75 + "px"; } } else { topSection.style.position = 'inherit'; topSection.style.top = 'none'; topSection.style.zIndex = 'inherit'; } }); |
Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany.
To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze pierwszy wariant nagłówka. Kolejne kroki instrukcji są przygotowane z myślą o drugim wariancie nagłówka.
Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę „Więcej” (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.
Modyfikacje dla drugiego wariantu nagłówka
Pierwszym krokiem jest modyfikacja pliku html z nagłówkiem. W tym celu w plikach szablonu otwórz plik elements->header->header-2.html. Jeśli w folderze elements->header posiadasz inny plik, to znaczy, że w kreatorze wybrany został inny wariant nagłówka.
Kod w powyższym pliku podmień na następujący:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 |
{% assign categories = page.GroupNodes %} {% assign lngCount = config.Languages | Size -%} {% assign currentLang = config.Languages[page.LanguageId] -%} <div class="headerBackground hidden"></div> <header class="headerSection headerSection__bg pageHeader-js"> <div class="headerSection__row"> <div class="headerSection__row"> <a aria-label="headerSectionLogo" class="headerSection__logo" href="{{config.DefinedPages.Home.Url}}"> {% assign logoAlt = config.Shop.Name | H -%} {{config.Shop.ImageUrl | Img: '', logoAlt}} </a> <div class="headerSection__searchForm headerSearchForm-js"> <span class="closeSearchButton"> <svg><use xlink:href="css/img/icons-sprite.svg#times-{{settings.iconStyle}}"></use></svg> </span> <div class=" inputs-container-js" title="{{translations.Com_Search}}"> <input aria-label="search" type="hidden" name="__action" value="Get/Search" /> <input type="search" name="search" class="headerSection__searchForm__phrase searchFormPhrase-js getSearchAutocomplete-js" aria-label="searchFormPhrase" placeholder="{{translations.SearchInShop}}" autocomplete="off" required /> <button class="headerSection__searchForm__btn header__icon getSearch-js enterKeyTrigger-js" aria-label="searchForm"> <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg> </button> <button aria-label="searchButton" class="headerSection__searchForm__searchButtonMobile hidden header__icon getSearch-js enterKeyTrigger-js"> {{translations.Com_Search}} </button> </div> </div> <div class="headerSection__iconsMenu"> <span class="header__icon mobileMenuIcon headerSection__iconsMenuItem hideOnMobile showMenuSection-js" title="{{ translations.Hea_Menu }}"> <svg><use xlink:href="css/img/icons-sprite.svg#bars-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Hea_Menu }}</span> </span> {% if usr.Authenticated -%} <span class="headerSection__iconsMenuItem"> <a class="header__customer-profile header__icon hideOnMobile" aria-label="customerProfile" href="{{ config.DefinedPages.CustomerProfile.Url }}" title="{{ translations.Hea_CustomerProfile }}"> <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Hea_CustomerProfile }}</span> </a> </span> <div class="header__icon inputs-container-js hideOnMobile headerSection__iconsMenuItem" title="{{ translations.Cpr_Logout }}"> <input aria-label="customerLogout" type="hidden" name="__action" value="Customer/Logout"> <span class="customerLogout-js"> <svg><use xlink:href="css/img/icons-sprite.svg#power-off-{{settings.iconStyle}}"></use></svg> </span> <span class="iconsMenuItem__text">{{ translations.Cpr_Logout }}</span> </div> {% else -%} <a class="header__login header__icon headerSection__iconsMenuItem hideOnMobile" aria-label="headerIconLogin" href="{{ config.DefinedPages.Login.Url }}" title="{{ translations.Log_Login }}" rel="nofollow"> <svg><use xlink:href="css/img/icons-sprite.svg#user-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Log_Login }}</span> </a> {% endif -%} <span class="header__icon mobileSearchIcon headerSection__iconsMenuItem showSearchSection-js" title="{{ translations.Com_Search }}"> <svg><use xlink:href="css/img/icons-sprite.svg#search-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Com_Search }}</span> </span> <span class="headerSection__iconsMenuItem hideOnMobile {% if customer.Cart.Count > 0 -%} activeCart {% endif -%}" title="{{ translations.Crt_Cart }}"> <a aria-label="orderUrl" class="header__cart header__icon" href="{{ config.DefinedPages.Order.Url }}"> <svg><use xlink:href="css/img/icons-sprite.svg#{{settings.cartIconStyle}}-{{settings.iconStyle}}"></use></svg> <span class="iconsMenuItem__text">{{ translations.Crt_Cart }} (<span class="incrementProductsInCart-js" data-count="{{customer.Cart.Count}}">{% if customer.Cart.Count > 9 -%}+9{% else -%}{{ customer.Cart.Count }}{% endif -%}</span>)</span> </a> </span> </div> </div> <div class="headerSection__mainMenu headerSection__row headerMainMenu-js"> <div class="headerSection__mainMenu__navLinks"> <div class="headerSection__mainMenu__closeBtn mainMenuMobileCloseBtn-js"> <svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#times-{{settings.iconStyle}}"></use></svg> </div> {% if header.Nodes[0] -%} <span class="mainMenu__navLink header__icon openCategoryMenu-js"> {{ translations.Com_Categories }} <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg> </span> {% endif -%} <div class="headerSection__navigation"> <nav class="mainNavigation mainNavigation__links mainNavigation-js"> <div class="mainNavigation__categories"> <ul> {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize > 0 -%} <li> <span class="mainNavigation__category"> {{ category | A }} <span class="header__icon"> <svg class="header__icon--arrowDown openUndercategoryMenu-js"> <use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use> </svg> </span> </span> <ul> {% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%} {% if undercategoriesSize > 0 -%} <li> <span class="mainNavigation__undercategory"> <a aria-label="undercategoryName" href="{{undercategory.Url}}"><span>{{undercategory.Name}}</span></a> <span class="header__icon"> <svg class="header__icon--arrowDown openUndercategoryMenu-js"> <use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use> </svg> </span> </span> {% if undercategory.Nodes -%} <ul> {% for underundercategory in undercategory.Nodes -%} {% assign underundercategoriesSize = category.Groups | Size -%} {% if underundercategoriesSize > 0 -%} <span class="mainNavigation__underundercategory"> <a aria-label="undercategoryName" href="{{underundercategory.Url}}"><span>{{underundercategory.Name}}</span></a> </span> {% endif -%} {% endfor -%} </ul> {% endif -%} </li> {% endif -%} {% endfor -%} <li> <ul class="mainNavigation__categories__noChilds"> {% for undercategory in category.Groups -%} {% assign undercategoriesSize = undercategory.Nodes | Size -%} {% if undercategoriesSize == 0 -%} <li> <span class="mainNavigation__undercategory"> <a aria-label="undercategoryName" href="{{undercategory.Url}}"><span>{{undercategory.Name}}</span></a> </span> </li> {% endif -%} {% endfor -%} </ul> </li> </ul> </li> {% endif -%} {% endfor -%} <li> <ul class="mainNavigation__categories__noChilds"> {% for category in header.Nodes -%} {% assign categoriesSize = category.Groups | Size -%} {% if categoriesSize == 0 -%} <li> <span class="mainNavigation__category"> {{ category | A }} </span> </li> {% endif -%} {% endfor -%} </ul> </li> </ul> {% assign name = 'menuBanner' -%} {% if config.Banners[name].Images[0].Link != '' -%} <a class="imageLink" style="height:fit-content" href="//{{config.Banners[name].Images[0].Link}}" if true target="_blank" endif rel="noopener"> {% endif -%} <div class="mainNavigation__image"> {% if config.Banners[name].Images[0] -%} {% assign banner = config.Banners[name].Images[0] -%} {% if banner -%} {% assign bannerAlt = banner.Alt | H -%} {{banner.Url | Img: '', bannerAlt}} {% endif -%} <div class="menuBanner__content"> <p class="menuBanner__title">{{config.Banners[name].Images[0].Heading}}</p> <p class="menuBanner__text">{{config.Banners[name].Images[0].Text}}</p> </div> {% else -%} {{'css/img/img-placeholder.jpg' | Img, translations.DefaultImage}} <p class="banner__size">220x295</p> {% endif -%} </div> {% if config.Banners[name].Images[0].Link != '' -%} </a> {% endif -%} </div> </nav> </div> <span class="mainMenu__navLink header__icon openPagesMenu-js"> {{ translations.Hea_Pages }} <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg> </span> <div class="headerSection__navigation"> <nav class="mainNavigation mainNavigation__sites sitesNavigation-js"> <ul> <li><a aria-label="aboutUrl" href="{{ config.DefinedPages.About.Url }}"><span>{{config.DefinedPages.About.Name}}</span></a></li> <li><a aria-label="paymentUrl" href="{{ config.DefinedPages.Payment.Url }}" rel="nofollow"><span>{{config.DefinedPages.Payment.Name}}</span></a></li> <li><a aria-label="shippingUrl" href="{{ config.DefinedPages.Shipping.Url }}" rel="nofollow"><span>{{config.DefinedPages.Shipping.Name}}</span></a></li> <li><a aria-label="termsUrl" href="{{ config.DefinedPages.Terms.Url }}" rel="nofollow"><span>{{config.DefinedPages.Terms.Name}}</span></a></li> </ul> </nav> </div> <span class="mainMenu__navLink">{{ config.DefinedPages.Contact | A }}</span> {% for banner in config.Banners -%} {% assign imagesQuantity = banner.Images | Size -%} {% if banner.Name == 'lookbook' and imagesQuantity == 0 -%} {% assign fakeLookbook = true -%} {% endif -%} {% endfor -%} {% assign lookbooksQuantity = config.Lookbook.List | Size -%} {% if lookbooksQuantity > 1 -%} <span class="mainMenu__navLink header__icon openLookbooksMenu-js"> {{ translations.Lookbook }} <svg class="header__icon--arrowDown"><use xlink:href="css/img/icons-sprite.svg#angle-right-light"></use></svg> </span> <div class="headerSection__navigation"> <nav class="mainNavigation mainNavigation__lookbooks lookbooksNavigation-js"> <ul> {% for lookbook in config.Lookbook.List -%} <li><a aria-label="lookbookUrl" href="lookbook{{lookbook.Url}}"><span>{{lookbook.Text}}</span></a></li> {% endfor -%} </ul> </nav> </div> {% elseif lookbooksQuantity == 1 or fakeLookbook -%} <span class="mainMenu__navLink">{{ config.DefinedPages.Lookbook | A }}</span> {% endif -%} </div> <div class="headerSection__shopData"> {% if config.Shop.Contact.PhoneNo != '' -%} <span> <svg class="svgIcon footer__icon--rotate100"><use xlink:href="css/img/icons-sprite.svg#phone-{{settings.iconStyle}}"></use></svg> <a aria-label="contactPhoneNo" href="tel:{{config.Shop.Contact.PhoneNo}}">{{config.Shop.Contact.PhoneNo}}</a> </span> {% endif -%} {% if config.Shop.Contact.Email != '' -%} <span> <svg class="svgIcon svgIcon--envelope"><use xlink:href="css/img/icons-sprite.svg#envelope-{{settings.iconStyle}}"></use></svg> <a aria-label="contactEmail" href="mailto:{{config.Shop.Contact.Email}}">{{ config.Shop.Contact.Email }}</a> </span> {% endif -%} <span class="uppercase headerSection__languageAndCurrencyMenu__openBtn openLanguageAndCurrencyMenu-js"> <svg class="svgIcon mobileSvgIcon"><use xlink:href="css/img/icons-sprite.svg#globe-{{settings.iconStyle}}"></use></svg> {{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }} </span> <div class="headerSection__languageAndCurrencyMenu languageAndCurrencyMenu-js"> <div class="languageAndCurrencyMenu__container"> <div class="languageAndCurrencyMenu__language form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js"> <span class="languageAndCurrencyMenu__title">{{ translations.Prf_Language }}</span> <input aria-label="changeLanguage" type="hidden" name="__action" value="Customer/LanguageChange"/> {% for language in config.Languages -%} <input aria-label="languageId" id="lang-{{language.Id}}" class="checkbox-input customerCurrencyChange-js" value="{{language.Id}}" type="radio" name="languageId" {% if page.LanguageId == language.Id -%} checked {% endif -%}/> <label for="lang-{{language.Id}}"> <span class="checkBoxes__checkIcon"> <svg><circle cx="7" cy="8" r="2"/></svg> </span> {{ language.Language }} </label> {% endfor -%} </div> <div class="languageAndCurrencyMenu__currency form__checkBox checkBoxes__container checkBoxes__container--radio inputs-container-js"> <span class="languageAndCurrencyMenu__title">{{ translations.Com_Currency }}</span> <input aria-label="currencyChange" type="hidden" name="__action" value="Customer/CurrencyChange"/> {% for currency in config.Currencies -%} <input aria-label="currencyCode" id="curr-{{currency.Code}}" class="checkbox-input customerLanguageChange-js" value="{{currency.Code}}" type="radio" name="currency" {% if customer.Currency == currency.Code -%} checked {% endif -%}/> <label for="curr-{{currency.Code}}"> <span class="checkBoxes__checkIcon"> <svg><circle cx="7" cy="8" r="2"/></svg> </span> {{ currency.Code }} </label> {% endfor -%} </div> </div> </div> </div> </div> </div> </header> {% assign index = 0 -%} {% for msg in config.Messages -%} {% if msg.Type == 0 -%} {% assign index = index | Plus: 1 -%} {% assign cookieFormat = 'config-message-{0}' -%} {% assign cookieName = cookieFormat | Format : {{msg.Id}} -%} {% if page.Cookies[cookieName] != 1 -%} <div class="configMessages configMessages__header {% if index > 1 -%} hidden {% endif -%}"> <span id="{{ cookieName }}" class="configMessages__btn configMessages__btn-js" data-days="{{ msg.Days }}"> <svg><use xlink:href="css/img/icons-sprite.svg#times-light"></use></svg> </span> {% if msg.Title != '' -%} <div class="configMessages__title"> {% if msg.Url != '' -%} <a aria-label="msg" href="{{ msg.Url }}">{{ msg.Title }}</a> {% else -%} {{ msg.Title }} {% endif -%} </div> {% endif -%} <div class="configMessages__message">{{ msg.Message }}</div> </div> {% endif -%} {% endif -%} {% endfor -%} {% if page.PageId == 6 and page.QueryString contains "?fav=1" -%} {% assign headerMobileReturnButton = 1 -%} {% elseif page.PageId == 4 -%} {% assign headerMobileReturnButton = 1 -%} {% else -%} {% assign headerMobileReturnButton = 0 -%} {% endif -%} <div class="mobileCartReturnButton {% if headerMobileReturnButton == 0 -%} hidden {% endif -%}"> <a aria-label="returnButton" href="{{config.Pages[0].Url}}"><svg class="svgIcon"><use xlink:href="css/img/icons-sprite.svg#times-{{settings.iconStyle}}"></use></svg></a> {% if page.PageId == 4 -%}<span class="mobileCartItemsCounter">{{translations.CartContent}} ({{cart.Products | Size }})</span>{% endif -%} </div> |
|
0 1 2 |
.headerBackground{width:100%;background-color:{{settings.headerBgColor}};height:150px;margin:0;padding:0}.headerSection{color:{{settings.headerFontColor}};background-color:{{settings.headerBgColor}};width:100%;height:150px;box-sizing:border-box;position:relative;z-index:13}.headerSection.frozenHeader{position:fixed !important;top:0;box-shadow:2px 1px 4px 0 #b0b0b0}.headerSection.frozenHeader>.scrollHeader{padding-top:18px !important;padding-bottom:65px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__logo{top:17px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__iconsMenu{bottom:-55px !important}.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__mainMenu__navLinks .openCategoryMenu-js{position:fixed;top:25px;margin-left:9%}@media screen and (max-width: 1200px){.headerSection.frozenHeader>.scrollHeader .headerSection__row .headerSection__mainMenu__navLinks .openCategoryMenu-js{margin-left:13%}}.headerSection.frozenHeader>.scrollHeader .searchForm__searchAutocomplete{top:30px !important}.headerSection.frozenHeader .mainNavigation__links{top:-55px !important}.headerSection.frozenHeader .mainNavigation__sites{display:none !important}.headerSection .activeButton-js{color:{{settings.dropdownArrowColor}} !important}.headerSection.headerSection__bg>.headerSection__row{display:flex;width:100%;height:150px;padding:29px 3% 29px 3%;box-sizing:border-box;flex-direction:column;justify-content:space-between}.headerSection .headerSection__logo{height:36px;width:auto;text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-top:2px}.headerSection .headerSection__logo img,.headerSection .headerSection__logo svg{max-height:36px;max-width:100px;width:auto}.headerSection .header__icon{display:inline-block;color:{{settings.headerFontColor}};fill:{{settings.headerFontColor}};text-decoration:none;vertical-align:middle;text-align:center;cursor:pointer}.headerSection .header__icon svg{width:20px;position:relative;height:18px;top:5px}.headerSection .header__icon--arrowDown{transform:rotate(90deg);fill:{{settings.dropdownArrowColor}}}.headerSection .headerSection__row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;position:relative}.headerSection .headerSection__languageAndCurrencyMenu,.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2),.headerSection .mainNavigation{display:none}.headerSection .headerSection__languageAndCurrencyMenu__openBtn{cursor:pointer}.headerSection .mainNavigation{background-color:{{settings.headerBgColor}};border-radius:5px;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12)}.headerSection .mainNavigation ul{margin:0;padding:0;list-style:none}.headerSection .headerSection__navigation{position:absolute}.headerSection .headerSection__mainMenu__navLinks{text-transform:uppercase;font-size:14px;position:relative}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink{margin-right:30px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a{text-decoration:none;color:{{settings.headerFontColor}};position:relative;bottom:-3px}.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:visited,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:focus,.headerSection .headerSection__mainMenu__navLinks .mainMenu__navLink a:active{color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu__navLinks .header__icon.header__icon--arrowDown{margin-left:-5px}.headerSection .headerSection__mainMenu__closeBtn{display:none}.headerSection .headerSection__iconsMenu{font-size:14px;padding-top:3px}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:none}.headerSection .headerSection__iconsMenu .activeCart .header__icon{color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}}}.headerSection .headerSection__iconsMenu .header__icon{margin-bottom:8px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:23px}.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:none}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text{display:inline-block}.headerSection .headerSection__searchForm{height:36px;position:relative;box-sizing:border-box;width:30%;max-width:420px}.headerSection .headerSection__searchForm__searchButtonMobile,.headerSection .headerSection__searchForm .closeSearchButton{display:none}.headerSection .headerSection__searchForm__phrase{max-width:420px;width:100%;height:36px;padding:12px 10px 11px;box-sizing:border-box;border:1px solid {{settings.borderColor}};color:{{settings.headerFontColor}};background-color:rgba(255,255,255,0.25)}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.headerFontColor}};opacity:.7}.headerSection .headerSection__searchForm__btn{position:absolute;top:0;right:-35px;width:36px;height:36px;background-color:rgba(255,255,255,0.25);outline:none;border:1px solid {{settings.borderColor}}}.headerSection .headerSection__searchForm__btn svg{width:16px;height:16px;top:2px}.headerSection .searchForm__searchAutocomplete{display:block;margin:0 auto;padding:20px 0;top:45px;z-index:9;width:100%;position:absolute;box-sizing:border-box}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product{color:{{settings.headerFontColor}};display:flex;width:80%;max-width:500px;margin:0 auto;padding:15px 20px;background-color:{{settings.headerBgColor}};border-bottom:1px solid #f2f2f2;box-shadow:0 5px 5px 0 rgba(9,9,9,0.2);font-size:12px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product:last-child{border-bottom:none}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img{width:50px;height:60px;margin-right:15px}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__img img{width:100%;height:auto}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__names{width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerSection .searchForm__searchAutocomplete .searchAutocomplete__product__price{color:{{settings.secondaryFontColor}};margin-top:5px;font-weight:300}.headerSection .headerSection__shopData{font-size:12px;top:7px;position:relative;color:{{settings.headerFontColor}}}.headerSection .headerSection__shopData .svgIcon{height:13px;width:13px;fill:{{settings.dropdownArrowColor}};margin:0 5px -2px 25px}.headerSection .headerSection__shopData .svgIcon.svgIcon--envelope{margin-bottom:-3px}.headerSection .headerSection__languageAndCurrencyMenu{position:absolute;box-sizing:border-box;width:225px;background-color:{{settings.headerBgColor}};border-radius:5px;top:32px;right:0;box-shadow:0 10px 30px 10px rgba(0,0,0,0.12);text-transform:uppercase}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container{display:flex;flex-wrap:wrap;width:100%;padding:20px 20px 10px;box-sizing:border-box}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__container>div{width:50%}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input:checked+label .checkBoxes__checkIcon{top:9px}.headerSection .headerSection__languageAndCurrencyMenu .checkBoxes__container input+label:before{top:48%}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__btn{width:100%;display:inline-block;padding:15px 0 13px;font-size:14px;font-weight:500;text-align:center;border-top:1px solid {{settings.borderColor}};color:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__languageAndCurrencyMenu .languageAndCurrencyMenu__title{color:{{settings.headerFontColor}};font-weight:500;display:inline-block;padding-left:12px;width:100%;opacity:.5;margin:10px 0 5px}@media screen and (min-width: 768px){.headerSection .headerSection__navigation{top:32px;left:-5px}.headerSection .mainNavigation__sites{padding:30px;left:100px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__sites li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__sites li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__sites li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__sites li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block}.headerSection .mainNavigation__sites li:last-child a{margin-bottom:0}.headerSection .mainNavigation__lookbooks{padding:30px;left:315px;position:absolute;top:0;min-width:155px;box-sizing:border-box}.headerSection .mainNavigation__lookbooks li>a{text-transform:none;color:{{settings.headerFontColor}};font-weight:300;font-size:12px;box-sizing:border-box;text-decoration:none;margin-bottom:15px;display:inline-block;width:100%}.headerSection .mainNavigation__lookbooks li>a:hover{color:{{settings.headerFontColor}};font-weight:400}.headerSection .mainNavigation__lookbooks li>a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__lookbooks li>a span{border-bottom:1px solid {{settings.headerBgColor}};padding:5px 0;display:inline-block;white-space:nowrap}.headerSection .mainNavigation__lookbooks li:last-child a{margin-bottom:0}.headerSection .mainNavigation__links{min-width:468px;max-width:1265px;padding:35px;left:0;position:absolute;top:0}.headerSection .mainNavigation__links .mainNavigation__categories{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories .mainNavigation__categories__noChilds{display:flex;flex-direction:column}.headerSection .mainNavigation__links .mainNavigation__categories>ul{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.headerSection .mainNavigation__links .mainNavigation__categories>ul>li{margin-bottom:20px;width:220px;flex-grow:1}.headerSection .mainNavigation__links .imageLink{width:fit-content;height:fit-content}.headerSection .mainNavigation__links .mainNavigation__image{height:295px;width:220px;min-width:220px;overflow:hidden;position:relative}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content{position:absolute;top:50%;left:3%;max-height:50%}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__title{margin:0;padding:0;color:{{settings.bannerFontColor}};font-size:16px;font-weight:500}.headerSection .mainNavigation__links .mainNavigation__image .menuBanner__content .menuBanner__text{color:{{settings.bannerFontColor}};margin:.8rem 0 0;padding:0;font-size:14px}.headerSection .mainNavigation__links .mainNavigation__image img{width:220px;height:auto}.headerSection .mainNavigation__links .mainNavigation__image img[alt]{display:block;text-transform:none;box-sizing:border-box}.headerSection .mainNavigation__links .mainNavigation__categories ul li ul li{padding-bottom:15px}.headerSection .mainNavigation__links .mainNavigation__category a,.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{box-sizing:border-box;text-decoration:none}.headerSection .mainNavigation__links .mainNavigation__category,.headerSection .mainNavigation__links .mainNavigation__undercategory{display:inline-block;width:80%}.headerSection .mainNavigation__links .mainNavigation__category .header__icon,.headerSection .mainNavigation__links .mainNavigation__undercategory .header__icon{display:none}.headerSection .mainNavigation__links .mainNavigation__category{margin-bottom:25px;max-width:80%}.headerSection .mainNavigation__links .mainNavigation__undercategory a,.headerSection .mainNavigation__links .mainNavigation__underundercategory a{text-transform:none;color:{{settings.headerFontColor}};width:100%;font-weight:500;font-size:12px;display:inline-block}.headerSection .mainNavigation__links .mainNavigation__undercategory a span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a span{border-bottom:1px solid {{settings.headerBgColor}};display:inline-block;padding:5px 0}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover{color:{{settings.headerFontColor}};font-weight:600}.headerSection .mainNavigation__links .mainNavigation__undercategory a:hover span,.headerSection .mainNavigation__links .mainNavigation__underundercategory a:hover span{border-bottom:1px solid {{settings.linkFontColor}}}.headerSection .mainNavigation__links .mainNavigation__underundercategory a{font-weight:300}.headerSection .mainNavigation__links .mainNavigation__category a{color:{{settings.headerFontColor}};font-size:12px;font-weight:500;width:100%;display:inline-block}}.headerSection .checkBoxes__container input+label{color:{{settings.headerFontColor}}}.headerSection .banner__size{color:{{settings.headerBgColor}};text-align:center}.headerSection .customerLogin__mobileButton{display:none}@media screen and (max-width: 949px){.headerSection .headerSection__shopData span.headerSection__languageAndCurrencyMenu__openBtn{display:inline-block}}@media screen and (min-width: 1601px){.headerSection.headerSection__bg>.headerSection__row{padding:29px 0}}.mobileCartReturnButton{display:none} |
W tym samym katalogu otwórz plik layout-m0.css. Wyszukaj linijkę „@media only screen and (max-width: 768px){.headerSection{height:60px}”. Usuń ją, a w jej miejsce wklej następującą:
|
0 1 2 |
@media only screen and (max-width: 768px){.headerSection{height:60px}.headerSection .header__icon svg{width:15px;height:15px}.headerSection .mainMenu__navLink{position:relative}.headerSection .mainMenu__navLink.header__icon svg{top:16px;right:2px;position:absolute}.headerSection.headerSection__bg>.headerSection__row{height:110px;padding:15px 20px}.headerSection .mainNavigation__image,.headerSection .headerSection__mainMenu.headerSection__row,.headerSection .headerSection__searchForm{display:none}.headerSection .headerSection__mainMenu{position:fixed;top:0;bottom:56px;overflow:auto;z-index:1;left:0;right:0;background-color:{{settings.headerBgColor}};color:{{settings.headerFontColor}}}.headerSection .headerSection__mainMenu .headerSection__mainMenu__closeBtn{display:block;text-align:left;position:relative;padding:15px;width:50px;box-sizing:border-box;left:-15px;color:{{settings.linkFontColor}};fill:{{settings.linkFontColor}};cursor:pointer}.headerSection .headerSection__mainMenu .headerSection__navigation{position:relative}.headerSection .headerSection__mainMenu .mainNavigation{box-shadow:none}.headerSection .headerSection__mainMenu .mainNavigation ul{text-transform:none}.headerSection .headerSection__mainMenu .mainNavigation ul ul{display:none}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory{font-size:12px;padding:10px 0;display:inline-block;width:100%;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__mainMenu .mainNavigation.mainNavigation__sites li a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__category a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__undercategory a,.headerSection .headerSection__mainMenu .mainNavigation ul .mainNavigation__underundercategory a{color:{{settings.headerFontColor}};text-decoration:none;display:inline-block;padding:5px 0;width:calc(100% - 20px)}.headerSection .headerSection__mainMenu .mainNavigation__category a{font-weight:600}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{display:flex;flex-direction:column;padding:10px 20px 40px}.headerSection .headerSection__mainMenu .mainMenu__navLink{padding:15px 0;border-bottom:1px solid {{settings.borderColor}};width:100%;text-align:left}.headerSection .headerSection__mainMenu .mainMenu__navLink a{display:inline-block;width:100%}.headerSection .headerSection__mainMenu .mainNavigation__categories__noChilds{display:block !important}.headerSection .headerSection__row{flex-direction:row}.headerSection .headerSection__iconsMenu .hideOnMobile{display:none !important}.headerSection .headerSection__iconsMenu .mobileMenuIcon,.headerSection .headerSection__iconsMenu .mobileSearchIcon{display:inline-block}.headerSection .headerSection__iconsMenu .header__cart .iconsMenuItem__text,.headerSection .headerSection__iconsMenu .iconsMenuItem__text{display:block;margin-top:5px}.headerSection .headerSection__iconsMenu .headerSection__iconsMenuItem{margin-left:0}.headerSection .headerSection__iconsMenu{display:flex;flex-direction:row;justify-content:space-between;margin-top:-9px;font-size:10px}.headerSection .headerSection__searchForm{position:fixed;top:0;padding-top:25px;left:0;right:0;width:100%;max-width:100%;bottom:0;overflow:auto;height:auto;background-color:{{settings.primaryPageBgColor}};z-index:1}.headerSection .headerSection__searchForm .closeSearchButton{display:block;margin-bottom:25px;margin-left:20px}.headerSection .headerSection__searchForm .closeSearchButton:hover{cursor:pointer}.headerSection .headerSection__searchForm .closeSearchButton svg{width:18px;height:18px;fill:{{settings.linkFontColor}}}.headerSection .headerSection__searchForm__btn{display:none;background-color:{{settings.linkFontColor}};color:#fff;fill:#fff;position:relative;right:5px;top:-1px}.headerSection .headerSection__searchForm__searchButtonMobile{display:block;position:fixed;left:0;bottom:100px;width:calc(100% - 38px);height:48px;margin-left:20px;margin-right:20px;background-color:{{settings.primaryBtnBgColor}};border:1px solid {{settings.primaryBtnBorderColor}};color:{{settings.primaryBtnFontColor}};transition:200ms;text-transform:uppercase;font-size:14px;line-height:24px;font-weight:400;font-family:{{settings.fontFamily}}}.headerSection .headerSection__searchForm__searchButtonMobile:hover{background-color:{{settings.primaryBtnHoverBgColor}};color:{{settings.primaryBtnHoverFontColor}};border-color:{{settings.primaryBtnHoverBorderColor}}}.headerSection .headerSection__searchForm__phrase{margin:10px 20px 10px 20px;width:calc(100% - 40px);max-width:calc(100% - 40px);border-left:none;border-right:none;border-top:none;padding-bottom:14px;border-bottom:1px solid {{settings.primaryFontColor}}}.headerSection .headerSection__shopData{font-size:14px;top:-23px;left:-5px;padding-bottom:15px;margin-left:20px;margin-right:20px;border-bottom:1px solid {{settings.borderColor}}}.headerSection .headerSection__shopData .mobileSvgIcon{margin-left:0}.headerSection .headerSection__languageAndCurrencyMenu{position:relative;box-shadow:none;top:0;width:calc(100% - 20px);left:-5px}.headerSection .headerSection__searchForm__phrase{background-color:rgba(255,255,255,0.4);color:{{settings.secondaryFontColor}}}.headerSection .headerSection__searchForm__phrase::placeholder{color:{{settings.secondaryFontColor}}}.headerSection .searchForm__searchAutocomplete{position:fixed;display:block;top:110px;left:0;width:100%}.headerSection .customerLogin__mobileButton{display:block;position:relative;margin:20px 40px 40px}.headerSection .customerLogin__mobileButton svg{fill:{{settings.primaryBtnFontColor}};margin:0 5px -4px}}@media only screen and (max-width: 360px){.headerSection.headerSection__bg>.headerSection__row{padding:15px}.headerSection .headerSection__mainMenu .headerSection__mainMenu__navLinks{padding:10px 20px 40px}.headerSection .headerSection__shopData{left:0}}.mobileCartReturnButton{background-color:{{settings.primaryPageBgColor}};padding:31px 0 20px;display:block;width:100%;position:absolute;top:0;z-index:15}.mobileCartReturnButton svg{width:16px;height:16px;fill:{{settings.linkFontColor}};padding-left:30px;padding-right:17px}.mobileCartReturnButton .mobileCartItemsCounter{font-size:14px;font-weight:300;color:{{settings.primaryFontColor}};position:absolute;top:30px} |
Dalej, w tym samym katalogu otwórz plik layout-d0.css. Znajdź w nim linijkę, zaczynającą się od: „@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}”. Usuń ją i wklej w jej miejsce następującą:
|
0 1 2 |
@media screen and (min-width: 790px){.headerSection .mainNavigation__links{min-width:660px}}@media screen and (min-width: 950px){.headerSection .headerSection__shopData>span:nth-child(1),.headerSection .headerSection__shopData>span:nth-child(2){display:inline-block}}@media screen and (min-width: 1000px){.headerSection .mainNavigation__links{min-width:880px}}@media screen and (min-width: 1220px){.headerSection .mainNavigation__links{min-width:1100px}}@media screen and (min-width: 1400px){.headerSection.headerSection__bg>.headerSection__row{max-width:1400px;margin:0 auto}} |
Pozostało zmodyfikować pliki js. Otwórz plik js/layout0.js A w nim linijkę „var headerFunctions = {„. Należy usunąć cały blok kodu, początwszy od tej linijki, aż do „};”. Aby łatwiej zlokalizować ostatnią linię do usunięcia, następna po niej brzmi: „ui.showFooterSection = function() {„. W miejsce powyższego bloku kodu należy wkleić następujący:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
var headerFunctions = { init: function () { headerFunctions.events(); }, events: function () { var pageHeader = $('.pageHeader-js'); pageHeader.on('click', '.showSearchSection-js', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); $('.searchFormPhrase-js').focus(); }); pageHeader.on('click', '.showMenuSection-js', function() { $('.pageHeader-js .headerMainMenu-js').toggle(200); }); pageHeader.on('click', '.mainMenuMobileCloseBtn-js', function() { $('.pageHeader-js .headerMainMenu-js').hide(200); }); pageHeader.on('click', '.closeSearchButton > svg', function() { $('.pageHeader-js .headerSearchForm-js').toggle(200); }); pageHeader.on('input', '.searchFormPhrase-js', function() { if($(this).val().length > 0) { $('.headerSection__searchForm__searchButtonMobile').removeClass('hidden'); } else { $('.headerSection__searchForm__searchButtonMobile').addClass('hidden'); } }); pageHeader.on('click', '.openCategoryMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').toggle(200); $('.openLanguageAndCurrencyMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); app.loadImages(); }); pageHeader.on('click', '.openLanguageAndCurrencyMenu-js', function() { $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').toggle(200); $('.openCategoryMenu-js, .openPagesMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openPagesMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').hide(200); $('.pageHeader-js .sitesNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openLookbooksMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('click', '.openLookbooksMenu-js', function() { $('.pageHeader-js .mainNavigation-js').hide(200); $('.pageHeader-js .languageAndCurrencyMenu-js').hide(200); $('.pageHeader-js .sitesNavigation-js').hide(200); $('.pageHeader-js .lookbooksNavigation-js').toggle(200); $('.openCategoryMenu-js, .openLanguageAndCurrencyMenu-js, .openPagesMenu-js').removeClass('activeButton-js'); $(this).toggleClass('activeButton-js'); }); pageHeader.on('change', '.customerLanguageChange-js', function(e) { if($(this).is(':checked')) {app.customerLanguageChange(e)} }); pageHeader.on('change', '.customerCurrencyChange-js', function(e) { if($(this).is(':checked')) {app.customerCurrencyChange(e)} }); pageHeader.on('click', '.openUndercategoryMenu-js', function(e) { var undercategory = $(e.currentTarget).closest('li').find('ul').first(); $(undercategory).toggle(200); }); $(window).ready(function(e) { $('html, body').animate({scrollTop : 0},10); $('html, body, .headerMainMenu-js').animate({scrollTop : 0}, 10); }); $(window).scroll(function(e) { if($(this).scrollTop() > 150&& $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').addClass('hidden'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection').css('height', '150px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').removeClass('hidden'); } }); $(window).on('resize', function(e) { if($(window).width() < 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection').css('height', '60px'); } else { if($(this).scrollTop() > 130 && $(this).width() > 768) { $('.headerBackground').removeClass('hidden'); $('.headerSection').addClass('frozenHeader'); $('.headerSection__shopData').addClass('hidden'); $('.headerSection__row').first().addClass('scrollHeader'); $('.headerSection').css('height', '70px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').addClass('hidden'); } else if ($(this).scrollTop() == 0 && $(this).width() > 768) { $('.headerBackground').addClass('hidden'); $('.headerSection').removeClass('frozenHeader'); $('.headerSection__shopData').removeClass('hidden'); $('.headerSection__row').first().removeClass('scrollHeader'); $('.headerSection').css('height', '150px'); $('.mainMenu__navLink').not('.openCategoryMenu-js').removeClass('hidden'); } } }); $(document).on('click', function (e) { //categories list if ($(e.target).closest('.openCategoryMenu-js').length === 0 && $(e.target).closest('.mainNavigation-js').length === 0 && $(e.target).closest($('.mainNavigation-js').children()).length === 0 && $(e.target).closest('.openPagesMenu-js').length === 0) { if($('.mainNavigation-js').css('display') != 'none') { $('.mainNavigation-js').toggle(200); $('.openCategoryMenu-js').removeClass('activeButton-js'); } } //pages list if($(e.target).closest('.openPagesMenu-js').length === 0 && $(e.target).closest('.sitesNavigation-js').length === 0 && $(e.target).closest($('.sitesNavigation-js').children()).length === 0 && $(e.target).closest('.openCategoryMenu-js').length === 0) { if($('.sitesNavigation-js').css('display') != 'none') { $('.sitesNavigation-js').toggle(200); $('.openPagesMenu-js').removeClass('activeButton-js'); } } //search form - autocomplete if($(e.target).closest('.searchForm__searchAutocomplete-js').length === 0 && $(e.target).closest($('.searchForm__searchAutocomplete-js').children()).length === 0) { if($('.searchForm__searchAutocomplete-js').css('display') != 'none') { $('.searchForm__searchAutocomplete-js').toggle(200); } } }); } }; |
Pozostała jeszcze mała modyfikacja kodu w porównywarce towarów, ponieważ przyklejony nagłówek jest przysłonięty przez porównywarkę. W tym celu otwórz plik js/layout1.js a w nim wyszukaj linię ” if (window.pageYOffset > (topPosition)) {„. Linia ta znajduje się w funkcji, której poczatkiem jest linia „$(window).on(’scroll’, function() {” a końcem linia „});”. Sama funkcja ma ok. 13 linii długości. Usuń ją, a w jej miejsce wklej poniższy kod:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(window).on('scroll', function() { if($('.frozenHeader').index()) { var headerHeight = parseInt($('.frozenHeader').css('height') + 5); } if (window.pageYOffset > (topPosition)) { topSection.style.position = 'sticky'; topSection.style.zIndex = '12'; if($('.frozenHeader').index()) { topSection.style.top = headerHeight + "px"; } else { topSection.style.top = 75 + "px"; } } else { topSection.style.position = 'inherit'; topSection.style.top = 'none'; topSection.style.zIndex = 'inherit'; } }); |
Gotowe ! W ten sposób problem nachodzenia porównywarki na przyklejony nagłówek zostaje wyeliminowany.
To wszystkie kroki do wykonania przyklejonego nagłówka, gdy wybrałeś w Kreatorze wariant drugi nagłówka. Instrukcja dla wariantu pierwszego znajduje się na początku niniejszego artykułu.
Aby Twoje zmiany stały się widoczne, otwórz Panel Administracyjny, zakładka Wygląd sklepu -> Ustawienia. Wybierz odpowiedni szablon. Naciśnij ikonkę „Więcej” (trzy kropki w prawym górnym rogu ekranu) i wybierz opcję Publikuj. W ciągu kilku minut wprowadzone zmiany będą widoczne dla Klientów Twojego sklepu.