Przykład menu kurtynowego na masce standard v3 - IDOSELL

Jak zrobić menu kurtynowe? IDOSELL (IAI) maska STANDARD V3

W odpowiedzi na ogromne zapotrzebowanie modyfikacji szablonu sklepu na IDOSELL przedstawiamy gotową modyfikację CSS która wyświetla menu kurtynowe zamiast klasycznego w szablonie standard.

Jak dodać style CSS w masce standard?

W celu modyfikacji styli CSS należy przejść do Moderacja → Zarządzanie szablonami dla strony

Menu zarządzanie szablonami dla strony

Następnie wybieramy odpowiednią wersję językową, jeśli takową posiadamy. Dalej należy kliknąć przycisk Dostosuj (ikonka z ołówkiem).

Kolejnym krokiem jest wybranie kafelka z nagłówkiem Edytuj arkusz styli CSS, a dokładniej należy kliknąć na link prowadzący do edycji styli CSS sygnowany ołówkiem oraz tekstem Edytuj CSS

Gotowe style CSS które odmienią Twoje menu! Menu kurtynowe

Jeśli już wykonałeś poprzednie kroki następnie należy wkleić w prawym oknie kod CSS który zmieni menu sklepu w menu kurtynowe.

@media (min-width: 979px) {

header .nav-item {
    position: static!important;
}

header .navbar-subsubnav {
    border: none;
}

header .navbar-subnav > .nav-item > .nav-link:not(:only-child)::after {
    display: none;
}

.navbar-nav>li>.navbar-subnav>li {
    padding: 0 20px;
    break-inside: avoid-column;
    display: table;
}

.navbar-nav li .navbar-subnav {
    width: 100%;
    padding: 30px 20px;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

.navbar-subsubnav {
    position: static!important;
    display: block!important;
}

.navbar-subnav > .nav-item > .nav-link {
    color: #0090f6;
    font-size: 120%;
}
}

Klikamy Zobacz zmiany w trybie podglądu w celu sprawdzenia działania modyfikacji, a następnie po weryfikacji Zapisz zmiany.

Poniższy kod jest odpowiedzialny za nagłówek pod kategorii w menu.

.navbar-subnav > .nav-item > .nav-link {
    color: #0090f6;
    font-size: 120%;
}

właściwość color wpływa na kolor nagłówka, który otrzymał wartość #0090f6; czyli kolor niebieski

font-size z wartością 120%; wpływa na rozmiar tekstu, w tym przypadku nagłówek jest większy o 20% od elementu nadrzędnego.

Leave a Reply

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>