#02 Styling SVG Icons in the Divi Menu

by Ania

February 22, 2021

Here’s the CSS code used:

/* Navigation Style */
.dl-menu svg {
    height: 60px;
    margin-bottom:12px;
}

.dl-menu a, .dl-menu .et_mobile_menu li a {
    display: flex;
    flex-direction: column;
    text-align:center;
}
.dl-menu.et_pb_menu .et-menu>li {
    padding: 0;
}
.dl-menu.et_pb_menu .et-menu>li a {
    padding: 40px 25px;
    transition: all .3s ease-in-out;
}
.dl-menu.et_pb_menu .et_mobile_menu>li a {
    padding: 60px 0;
}	

.dl-menu.et_pb_menu .et-menu>li a:hover,
.dl-menu .et_mobile_menu li a:hover {
    opacity: 1;
    background:#b1e5e0;
}

.dl-menu.et_pb_menu .et-menu>li.current-menu-item a,
.dl-menu.et_pb_menu .et_mobile_menu>li.current-menu-item a {
    background: #19252b;
}
.dl-menu svg * {
    stroke: #19252b;
}
.dl-menu .current-menu-item svg * {
    stroke: #fff;
}

.dl-menu .et_mobile_menu {
    padding: 0;
    border: 1px #19252b solid;
    margin-top: 30px;
}

.dl-menu .et_mobile_menu li {
    width: 25%;
    float: left;
}

@media (max-width:479px) {
    .dl-menu .et_mobile_menu li {
    	width: 50%;
    }
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *