Im having issues with my menu, below is a link to the template i purchased and it shows how the menu should be showing.
Also if you look at the preview it shows how the menu should be but the published link shows a different menu display.
https://webflow.com/templates/html/mason-construction-website-template
I have spoken with Webflow support and they recommended I remove custom code in the header section, below are the screen shots.
I have removed the recommended code and the issue still persists.
below is the custom code for headers section.
live-site public link: https://ame-group-ltd-e699bb640eef8b11dcdcc3fdb.webflow.io/
.section_mental.page-header.service { margin-top: 80px; } .w-dropdown-link { padding-top: 12px; padding-bottom: 12px; background-color: #fff; color: #343e52; font-size: 13px; line-height: 23px; font-weight: 500; } div#w-dropdown-toggle-1 a { text-decoration: none; color: #000; } footer.nav-menu-3.w-nav-menu a { color: #fff; } .w-icon-dropdown-toggle { margin-right: 3px; } .nav-link a.w--current { text-decoration: none; color: #000; } footer.nav-menu-3.w-nav-menu a { display: block; padding: 5px 0px; } .nav-menu-3{ display: block; float: left; } .section_wall_covering_content li,.section_stucco_content li,.section_brick_content li,.section_cedar_content li,.section_shingles_content li,.section_maintenance_content li, .section_metal_sheet_content li, .section_siding_roofing li, .section_roofrepair_content li { list-style-image: URL('https://daks2k3a4ib2z.cloudfront.net/60a682780f608c2fc8fb3091/60ab749453a289805f808c1f_arrow.png'); list-style-position: outside; margin-left: 20px; } a.button-wrapper.centered.w-inline-block.w--current:hover .button-text.gray { color: #e41f1f; } .work-hover { width: 97%; } .section_guiding .columns-3 { margin-top: 30px; } a.brand-2 img { max-width: fit-content; } .nav-link.dropdown { font-family: Poppins, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; height: 39px; padding: 6px 20px; background-color: transparent; color: #222222; } .nav-link.dropdown:hover { background-color: #bc1116; color:#ffffff; } .nav-button-block .button { width: auto; height: auto; margin-right: 0px; padding: 0 0; border-radius: 0px; background-color: #bc1116; -webkit-transition: all 400ms ease; transition: all 400ms ease; font-size: 14px; line-height: 53px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; width: 133px; height: 53px; } .nav-button-block { padding-left: 20px; } .nav-link { padding: 6.5px 20px; } body { padding-right: 0; padding-left: 0; } .bootom-footer { margin: 0; padding: 30px 0; } .text-block-5 { letter-spacing: 1px; } .footer-wrapper.blue { box-shadow: 0 4px 3px rgb(0 0 0 / 55%); } .footer.black { border-top: 1px solid #ffffff; } .footer-wrapper { padding: 55px 35px 40px; } .footer-header.white { margin: 0 0 15px; } footer.nav-menu-3.w-nav-menu a { padding: 0 0 8px; text-transform: uppercase; } .contact-us-block img { max-width: fit-content; vertical-align: middle; } .footer-text.white { padding-top: 0; } .footer_col1.w-col.w-col-3 { width: 30%; } .footer_col2.w-col.w-col-3 { width: 15%; } .footer_col3.w-col.w-col-3 { width: 28%; } ul.list-4.w-clearfix.w-list-unstyled li { line-height: 24px; } .line-1,.line-2,.line-3,.line-4 { width: 0px!important; } div#w-dropdown-toggle-1:hover a { color: #ffffff; } .nav-link.dropdown:hover a { color: #ffffff; } .page-header { padding-top: 110px; padding-bottom: 140px; background-position: top center; } .page-header { /* height: 80px; */ /* padding: 0; */ margin: 0; } .sticky { position: fixed; top: 0; width: 100%; } .section_emergency_content img { max-width: fit-content; } .emergency_col1.w-col.w-col-6 { width: 42%; display: inline-block; vertical-align: top; } .emergency_col2.w-col.w-col-6 { display: inline-block; vertical-align: top; width: 58%; padding: 0 0 0 60px; } .section.gradient-section { background-image: -webkit-gradient(linear, left bottom, left top, from(#f3f5fd), to(#fff)); background-image: linear-gradient( 0deg , #f3f5fd, #fff); } .nav-link.dropdown a { color: #111; text-decoration: none; } .footer-text.white.email a { color: #fff; text-decoration: none; } a.service-button:hover { /* color: #222; */ font-weight: bold; } .res_cols { margin-top: 30px; margin-right: 0px; margin-left: 0px; } div#res_col1, div#res_col2, div#res_col3, div#res_col4, div#res_col5 { margin-right: 2.5%; } .residential_col { width: 14.5%; } .res_cols { margin: 30px 0px 0px 0px!important; } .section_commercial_content .residential_col { width: 22%; height: 135px; vertical-align:middle } a.w-dropdown-link { border-bottom: 1px solid #efecec; } a.w-dropdown-link:hover { background-color: #bc1116; color: #ffffff; } a.w-dropdown-link:last-child { border: 1p; border-bottom: 0; } .res_icon_heading{ margin-top: 10px; margin-bottom: 10px; text-transform: capitalize; } .residential_col { padding-top: 15px; padding-bottom: 5px; } .nav-button-block { margin-top: -7px; } .nav-button-block .button { text-align: center; } .section_commercial_content .w-container .w-row { margin-left: 0; margin-right: 0; } .com_cols { margin: 0px 0px 30px; } div#res_col3_blank { display: none; } .abut-us-copy { line-height: 22px; } div#dry_col1 { width: 44%; margin-left: 6%; } div#dry_col2 { width: 44%; } .info-wrapper-roofing { height: 230px; } .info-wrapper-roofing .flex-info { margin-top: 30px; } .row-service-top-roof { margin-left: -15px; margin-right: -15px; } #service_info_wrapper{ height:185px } #service_info_wrapper .flex-info { margin-top: 20px; } div#service_row { margin: 0 -15px; } .icon_div { position: relative; overflow: hidden; } .icon_div img { transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; } .residential_col:hover .icon_div img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transition: all 0.8s ease 0s; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -ms-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; cursor: pointer; } select#Type-Of-Project { height: 41px; } .nav-menu-2 .nav-button-block .button{ width:auto; padding:0 10px; } /************************************************************************************ smaller than 1280 *************************************************************************************/ @media screen and (max-width: 1280px) { } /************************************************************************************ smaller than 1024 *************************************************************************************/ @media screen and (max-width: 1024px) { .footer .footer_col4 { width: 26%; } } /************************************************************************************ smaller than 980 *************************************************************************************/ @media screen and (max-width: 980px) { .footer.black .footer-wrapper.blue .w-col { width: 100%; padding-bottom: 10px; } .footer h1.footer-header.white { margin: 0; } .footer .menu-button-3.w-nav-button { padding-bottom: 10px; padding-top: 0; } .contact-us-block img { max-width: fit-content; } .footer .footer-column { padding-right: 0; } .footer footer.nav-menu-3.w-nav-menu a { padding: 6px 0; } .footer footer.nav-menu-3.w-nav-menu { padding-bottom: 10px; display: block !important; background-color: transparent; position: relative; } .footer .menu-button-3.w-nav-button { display: none; } .footer .menu-button-3.w-nav-button.w--open { display: none; background-color: #000; padding: 10px; } .footer div#w-nav-overlay-1 { position: relative; height: auto !important; } } /************************************************************************************ smaller than 823 *************************************************************************************/ @media screen and (max-width: 823px) { } /************************************************************************************ smaller than 768 *************************************************************************************/ @media screen and (max-width: 768px) { #services_work_image,#roofing_services_image{ width:100% } .emergency_col1.w-col.w-col-6 { width: 100%; text-align: center; } .emergency_col2.w-col.w-col-6 { width: 90%; padding: 30px 0 0 0px; margin: 0 5%; } .emergency_col2.w-col.w-col-6 .abut-us-copy { text-align: center; } .emergency_content_title { text-align: center; } .emergency_col1.w-col.w-col-6 img { width: 100%; } .small_heading { line-height: 25px; } .footer_col2 .footer-header.white { padding-bottom: 10px; } .footer_col3 h1.footer-header.white { margin-top: 20px; } .footer_col4 h1.footer-header.white { margin-top: 10px; } .info-wrapper-roofing { height: auto; transform: none!important; border-width: 1px 1px 1px; } .nav-link.dropdown,.nav-link.dark{ border:none!important } .w-icon-dropdown-toggle { margin-right: 17px; } .info-wrapper { border-width: 1px 1px 1px; } } /************************************************************************************ smaller than 767 *************************************************************************************/ @media screen and (max-width: 767px) { } /************************************************************************************ smaller than 736 *************************************************************************************/ @media screen and (max-width: 736px) { .footer-wrapper.blue { padding-top: 50px; padding-bottom: 20px; margin-bottom: 30px; } .footer .blue .footer-column { margin-top: 0; } } /************************************************************************************ smaller than 667 *************************************************************************************/ @media screen and (max-width: 667px) { } /************************************************************************************ smaller than 640 *************************************************************************************/ @media screen and (max-width: 640px) { } /************************************************************************************ smaller than 568 *************************************************************************************/ @media screen and (max-width: 568px) { .text-block-left { width: auto; margin-left: 0; } .info-wrapper-roofing { height: auto; } .image-125 { margin-left: 0px; } p.roof_content1 { text-align: center; } .small_heading { text-align: center; } .section_maintenance_content .strong { text-align: center; } .ame_heading3 { text-align: center; } .section-6 p { text-align: center; } } /************************************************************************************ smaller than 480 *************************************************************************************/ @media screen and (max-width: 480px) { .footer h1.footer-header.white { padding-bottom: 15px; } } /************************************************************************************ smaller than 414 *************************************************************************************/ @media screen and (max-width: 414px) { } /************************************************************************************ smaller than 384 *************************************************************************************/ @media screen and (max-width: 384px) { } /************************************************************************************ smaller than 375 *************************************************************************************/ @media screen and (max-width: 375px) { .small_heading { font-size: 15px; line-height: 22px; } li.list_arrow { text-align: left; } } /************************************************************************************ smaller than 360 *************************************************************************************/ @media screen and (max-width: 360px) { } /************************************************************************************ smaller than 320 *************************************************************************************/ @media screen and (max-width: 320px) { .footer .footer_col4.w-col.w-col-3.w-col-stack { padding: 0; } .image-125 { margin-left: 0px; } .section_about { padding-right: 0px; padding-left: 0px; } .abut-us-copy { text-align: center; } .container { text-align: center; } .list-4 li { text-align: left; } .emergency_content_title { font-size: 20px; line-height: 30px; } .heading-3 { text-align: center; } .info-wrapper-roofing { border-width: 1px 1px 1px; } }