Zvýraznění menu 6/6 – lišta s vystupující položkou
Publikováno 25. 11. 2019
V kategorii Menu

Pokud se nám do vzhledu webu hodí celistvá lišta menu, můžeme aktivní části nechat z lišty povystoupit. Opět jednoduše – vložením CSS do Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS.

/*** Zvyrazneni menu - lista s vystupujici polozkou - Zabza.eu ***/
    @media only screen and (min-width : 981px) {
         
        .et_fullwidth_nav #main-header .container {
            padding-right: 0px!important;
            padding-left: 0px!important;}
         
        #et-top-navigation {
            background: #3173b5;}
 
        .et_header_style_left #et-top-navigation,
        .et_header_style_split #et-top-navigation {
            padding-top: 0px!important;
            padding-left: 13px!important;}
             
        #top-menu li {
            padding-right: 15px;}
 
        #top-menu > li > a {
            padding: 15px 15px!important;
            margin-bottom: 0px;
            margin-top: 0px;}
 
        #top-menu .menu-item-has-children > a:first-child:after {
            display:none;}
 
        #top-menu-nav > ul > li > a {
            color: #ffffff;
            -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
            box-shadow: 0 0 1px transparent;
            -webkit-transition-duration: 0.1s;
            transition-duration: 0.1s;
            -webkit-transition-property: box-shadow, transform;
            transition-property: box-shadow, transform;}
             
        #top-menu-nav > ul > li > a:hover, 
        #top-menu-nav > ul > li > a:focus, 
        #top-menu-nav > ul > li > a:active {
            background:#214c79;
            color:#ffffff;
            opacity:1;
            z-index: 99999;
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 1.0);
            -webkit-transform: translateZ(0) scale(1.1);
            transform: translateZ(0) scale(1.1);}}

A to je vše. V tomto návodu i miniseriálu. Doufám že to někomu pomůže třeba k oživení a nebo třeba i zpřehlednění webu. A nebo k poznání, že i tak dokonalá šablona jakou Divi bezesporu je, může být vylepšována a to i svépomocí.

DEMO

0 komentářů

Přidat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Buďte jednoduše v obraze

Jednou týdně vám pošleme přehled nových článků abyste nemuseli nic hledat a měli všechno najednou pohromadě. Stačí jen vložit email, odeslat a potvrdit ve zprávě kterou vám obratem zašleme odběr novinek.

Přihlášení k odběru novinek proběhlo v pořádku.

Sdílet na Pinterestu

Sdílej