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ć.
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:
{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}
{{ translations.Hea_Menu }}
{% assign logoAlt = config.Shop.Name | H -%}
{{config.Shop.ImageUrl | Img: '', logoAlt}}
{{ translations.Com_Search }}
{% if usr.Authenticated -%}
{% else -%}
{{ translations.Log_Login }}
{% endif -%}
{{ translations.Hea_Menu }}
{% if header.Nodes[0] -%}
{{ translations.Com_Categories }}
{% endif -%}
{{ translations.Hea_Pages }}
{{ config.DefinedPages.Contact | A }}
{% 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 -%}
{{ translations.Lookbook }}
{% elseif lookbooksQuantity == 1 or fakeLookbook -%}
{{ config.DefinedPages.Lookbook | A }}
{% endif -%}
{% if config.Shop.Contact.PhoneNo != '' -%}
{{config.Shop.Contact.PhoneNo}}
{% endif -%}
{% if config.Shop.Contact.Email != '' -%}
{{ config.Shop.Contact.Email }}
{% endif -%}
{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}
{{ translations.Prf_Language }}
{% for language in config.Languages -%}
{% endfor -%}
{{ translations.Com_Currency }}
{% for currency in config.Currencies -%}
{% endfor -%}
{% if usr.Authenticated == false -%}
{{translations.Com_Login}} / {{translations.Registration}}
{% endif -%}
{% 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 -%}
{% 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 -%}
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:
.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ą:
@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ą:
@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:
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:
$(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:
{% assign categories = page.GroupNodes %}
{% assign lngCount = config.Languages | Size -%}
{% assign currentLang = config.Languages[page.LanguageId] -%}
{% assign logoAlt = config.Shop.Name | H -%}
{{config.Shop.ImageUrl | Img: '', logoAlt}}
{% if usr.Authenticated -%}
{% else -%}
{% endif -%}
{{ translations.Com_Search }}
{% if header.Nodes[0] -%}
{{ translations.Com_Categories }}
{% endif -%}
{{ translations.Hea_Pages }}
{{ config.DefinedPages.Contact | A }}
{% 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 -%}
{{ translations.Lookbook }}
{% elseif lookbooksQuantity == 1 or fakeLookbook -%}
{{ config.DefinedPages.Lookbook | A }}
{% endif -%}
{% if config.Shop.Contact.PhoneNo != '' -%}
{{config.Shop.Contact.PhoneNo}}
{% endif -%}
{% if config.Shop.Contact.Email != '' -%}
{{ config.Shop.Contact.Email }}
{% endif -%}
{{ config.Languages[page.LanguageId].Language }} / {{ customer.Currency }}
{{ translations.Prf_Language }}
{% for language in config.Languages -%}
{% endfor -%}
{{ translations.Com_Currency }}
{% for currency in config.Currencies -%}
{% endfor -%}
{% 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 -%}
{% 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 -%}
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:
.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ą:
@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ą:
@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:
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:
$(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.