body,.et_pb_column_1_2 .et_quote_content blockquote cite,.et_pb_column_1_2 .et_link_content a.et_link_main_url,.et_pb_column_1_3 .et_quote_content blockquote cite,.et_pb_column_3_8 .et_quote_content blockquote cite,.et_pb_column_1_4 .et_quote_content blockquote cite,.et_pb_blog_grid .et_quote_content blockquote cite,.et_pb_column_1_3 .et_link_content a.et_link_main_url,.et_pb_column_3_8 .et_link_content a.et_link_main_url,.et_pb_column_1_4 .et_link_content a.et_link_main_url,.et_pb_blog_grid .et_link_content a.et_link_main_url,body .et_pb_bg_layout_light .et_pb_post p,body .et_pb_bg_layout_dark .et_pb_post p{font-size:14px}.et_pb_slide_content,.et_pb_best_value{font-size:15px}.container,.et_pb_row,.et_pb_slider .et_pb_container,.et_pb_fullwidth_section .et_pb_title_container,.et_pb_fullwidth_section .et_pb_title_featured_container,.et_pb_fullwidth_header:not(.et_pb_fullscreen) .et_pb_fullwidth_header_container{max-width:1499px}.et_boxed_layout #page-container,.et_boxed_layout.et_non_fixed_nav.et_transparent_nav #page-container #top-header,.et_boxed_layout.et_non_fixed_nav.et_transparent_nav #page-container #main-header,.et_fixed_nav.et_boxed_layout #page-container #top-header,.et_fixed_nav.et_boxed_layout #page-container #main-header,.et_boxed_layout #page-container .container,.et_boxed_layout #page-container .et_pb_row{max-width:1659px}.et_secondary_nav_enabled #page-container #top-header{background-color:#97876b!important}#et-secondary-nav li ul{background-color:#97876b}#top-menu li.current-menu-ancestor>a,#top-menu li.current-menu-item>a,#top-menu li.current_page_item>a{color:#97876b}#main-footer{background-color:#f7f7f9}.bottom-nav,.bottom-nav a,.bottom-nav li.current-menu-item a{color:#000000}#et-footer-nav .bottom-nav li.current-menu-item a{color:#000000}#footer-bottom{background-color:#000000}#footer-info,#footer-info a{color:#ffffff}#footer-bottom .et-social-icon a{font-size:18px}#footer-bottom .et-social-icon a{color:#ffffff}@media only screen and (min-width:981px){.et_header_style_left #et-top-navigation,.et_header_style_split #et-top-navigation{padding:58px 0 0 0}.et_header_style_left #et-top-navigation nav>ul>li>a,.et_header_style_split #et-top-navigation nav>ul>li>a{padding-bottom:58px}.et_header_style_split .centered-inline-logo-wrap{width:116px;margin:-116px 0}.et_header_style_split .centered-inline-logo-wrap #logo{max-height:116px}.et_pb_svg_logo.et_header_style_split .centered-inline-logo-wrap #logo{height:116px}.et_header_style_centered #top-menu>li>a{padding-bottom:21px}.et_header_style_slide #et-top-navigation,.et_header_style_fullscreen #et-top-navigation{padding:49px 0 49px 0!important}.et_header_style_centered #main-header .logo_container{height:116px}#logo{max-height:63%}.et_pb_svg_logo #logo{height:63%}.et_fixed_nav #page-container .et-fixed-header#top-header{background-color:#97876b!important}.et_fixed_nav #page-container .et-fixed-header#top-header #et-secondary-nav li ul{background-color:#97876b}.et-fixed-header #top-menu li.current-menu-ancestor>a,.et-fixed-header #top-menu li.current-menu-item>a,.et-fixed-header #top-menu li.current_page_item>a{color:#97876b!important}}@media only screen and (min-width:1873px){.et_pb_row{padding:37px 0}.et_pb_section{padding:74px 0}.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper{padding-top:112px}.et_pb_fullwidth_section{padding:0}}#logo{max-height:60%}@font-face{font-family:CG-Reg;src:url(https://advanceremodel.com/wp-content/uploads/2020/04/GOTHIC_0.TTF)}html,body,h1,h2,h4,h5,p{font-family:CG-Reg!important}h3{font-family:CG-Reg}#main-footer{background-color:#f7f7f7}.footer-widget .et_pb_widget{float:right}.mobile_menu_bar:before{color:#97876b}.et_mobile_menu{border-top:3px solid #97876b}#footer-widgets .footer-widget a,#footer-widgets .footer-widget li a,#footer-widgets .footer-widget li a:hover{color:#000}#footer-widgets .footer-widget li:before{display:none}#footer-widgets .footer-widget li{position:relative;padding-left:24px;display:inline-block}#footer-widgets .footer-widget ul{margin-top:25px;margin-left:70px}.footer-widget{color:#ffffff;margin-top:-30px;margin-bottom:20px!important}#footer-widgets{padding:4% 0 0% 0}#footer-widgets .footer-widget #media_image-2 img{width:220px;margin-top:15px;margin-left:60px}#footer-widgets .footer-widget li a{font-size:13px}#footer-widgets .footer-widget li{padding-left:20px}.widget_nav_menu{margin-top:10px}.et_pb_testimonial_portrait:before{box-shadow:none}.mfp-title{display:none}#gform_1 input[type=text],#gform_1 select,#gform_2 input[type=text],#gform_2 select,#gform_7 input[type=text],#gform_7 select{height:40px}#gform_1 input[type=submit],#gform_2 input[type=submit],#gform_7 input[type=submit]{background:#97876b;height:45px;border:none;color:#fff;padding:6px 40px;font-size:18px;font-weight:400;float:right;text-transform:uppercase}#gform_1 .gform_confirmation_message,#gform_2 .gform_confirmation_message,#gform_7 .gform_confirmation_message{text-align:center!important}#gform_5 input[type=text],#gform_5 input[type=email],#gform_5 input[type=tel],#gform_5 select,#gform_7 input[type=text],#gform_7 input[type=email],#gform_7 input[type=tel],#gform_7 select{height:40px}#gform_5 .gform_page_footer,#gform_7 .gform_page_footer{border-top:none}#gform_5 input[type=submit],#gform_5 input[type=button],#gform_7 input[type=submit],#gform_7 input[type=button]{background:#97876b;height:45px;border:none;color:#fff;padding:6px 40px;font-size:18px;font-weight:400;float:right;text-transform:uppercase}#gform_5 .gf_step.gf_step_active,#gform_7 .gf_step.gf_step_active{-moz-opacity:1;-khtml-opacity:1;opacity:1;font-size:14px;font-weight:600;color:#97876b}#gform_5 .gf_step.gf_step,#gform_7 .gf_step.gf_step{font-size:14px;font-weight:600}#gform_5 .gfield_no_follows_desc,#gform_7 .gfield_no_follows_desc{font-size:16px;margin-top:30px;margin-bottom:30px}#gform_5 .gfield_label,#gform_7 .gfield_label{line-height:1.6}.gform-step-space{margin-top:40px!important}.gform_wrapper .gform_page_footer{display:inline-grid;grid-template-columns:200px 145px auto}@media (max-width:1400px){.ahi-cp-ts{padding-right:10px!important}}@media (max-width:1200px){#footer-widgets .footer-widget ul{margin-top:20px;margin-left:20px}}@media (max-width:1067px){#footer-widgets .footer-widget #media_image-2 img{width:180px;margin-top:30px}}@media (max-width:980px){.footer-widget .et_pb_widget{float:none}#footer-widgets .footer-widget #media_image-2 img{width:180px;margin-top:-10px}#footer-widgets .footer-widget ul{margin-top:-20px;margin-left:0;margin-bottom:10px}}@media (max-width:767px){#footer-widgets .footer-widget ul{margin-top:0px;margin-left:-20px;margin-bottom:15px}#footer-widgets .footer-widget #media_image-2 img{width:180px;margin-top:20px;margin-left:0px}#footer-widgets .footer-widget:nth-child(n){margin-bottom:2.5%!important}}Divi Creative
Child Themes
Layouts
Code Snippets
Search …
Creating an Underline Menu in Divi (hover effect)
Instructions
An underline menu hover effect like in Extra Theme now available for Divi too.
All you have to do is to put this code to Theme Options>Custom CSS or in the Style.css file of your child theme. Also you can change the underline color (background:#404040;)
#top-menu .current-menu-item a::before,#top-menu .current_page_item a::before{content:"";position:absolute;z-index:2;left:0;right:0}#top-menu li a:before,#top-menu li ul li a:before{content:"";position:absolute;z-index:-2;left:0;right:100%;bottom:60%;background:#97876b;height:2px;-webkit-transition-property:right;transition-property:right;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}#top-menu li a:hover,#top-menu li ul li a:hover{opacity:1!important}#top-menu li a:hover:before,#top-menu li ul li a:hover:before{right:0}#top-menu li li a:before,#top-menu li ul li a:before{bottom:10%}#top-menu li ul li a{padding-left:0px;width:inherit!important}#top-menu li ul li a:hover{background-color:transparent;width:100%}.nav li ul{border-top:3px solid #97876b}#top-menu .menu-item-has-children ul.sub-menu li{display:block!important}.et_pb_filterable_portfolio_grid .et_pb_portfolio_item{display:block!important}@media only screen and (max-width:1240px){#top-menu-nav,#top-menu{display:none}#et_top_search{display:none}#et_mobile_nav_menu{display:block}.mobile_menu_bar:before{top:-20px}}@media only screen and (max-width:980px){.mobile_menu_bar:before{top:0px}}