Burger menu Icon – Breakpoint location

Hey Julie,

Thank you for the inquiry.

Did you configure the default logo not to display on desktop view? The reason the burger menu is pushed beneath the header is because of the logo container, which receives this style on smaller screens.

.responsive #top .logo {
    position: static;
    display: table;
    height: 80px !important;
    float: none;
    padding: 0;
    border: none;
    width: 80%;
}

To keep the logo hidden on mobile view, you can add this css code.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top .logo {
    display: none;
  }
}

Best regards,
Ismael

Hi,
Thanks for your patience, it looks like you have a customized menu item, I added this css to correct:

@media only screen and (max-width: 767px) { 
	.av_main_nav_header.av_menu_right #header_main .main_menu-uber {
    top: 0px;
	}
	#top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner, #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::before, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::before, #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::after, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::after {
    background: #326295 !important;
    opacity: 1;
}
}
.av-burger-overlay-active #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner, .av-burger-overlay-active #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner, .av-burger-overlay-active #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::before, .av-burger-overlay-active #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::before, .av-burger-overlay-active #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::after, .av-burger-overlay-active #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::after {
    background: #326295;
    opacity: 1;
}
#top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner, #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::before, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::before, #top #header.header_color.av_header_transparency .av-main-nav > li > a:hover .av-hamburger-inner::after, #top #header.header_color.av_header_transparency .av-main-nav > li > a:focus .av-hamburger-inner::after {
    background: #fff;
    opacity: 1;
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for letting us know, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard