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ářů