Burger Menu + Search Icon Position Mobile

Oh! Sorry, please see private section.

My apologies for the confusion, the css above is within the media query for mobile only – I have many mobile css styles so I was just showing the code within it.

This what I have now, I have changed it slightly but it’s still not correct:

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

.html_visible_cart .av-burger-menu-main {
    padding-right: 40%;
    margin-top: -25%;
}

#menu-item-search {
    position: relative;
    top: 100px;
    right: 20px;
}
}

I need to launch this site tomorrow so it’s becoming quite urgent.

Has anyone had a look at the website on a mobile device and my screenshots and understand the problem? I need to know the proper way to achieve what I have quickly done with the css but without the error.

Thank you for your help

• This reply was modified 7 years, 3 months ago by Briana. Reason: css change

Hello and yes, I still need some assistance thank you Jordan.
The website is now live and I have added the login to the private section.

I need know how I can keep my mobile menu positioning on tablet and phones without it breaking the menu when open.
The css for everything is a little different now that it’s launched as I had to try my best to see if I could fix this before launch but was unsuccessful.

Edit: I have made things work the way I like on tablet by adjusting my own custom css. Just need help with the mobile menu.

• This reply was modified 7 years, 2 months ago by Briana. Reason: Resolved sectionary issue, still need assistance with main issue

Here is my mobile and tablet code (I removed anything not affecting the header / menu):

/*TABLET LANDSCAPE*/

@media only screen and (min-width: 990px) and (max-width: 1249px) {
/*BURGER MENU ACTIVE */

.av-burger-menu-main { 
       display: block !important; 
}

.main_menu .menu-item {
 display: none !important;
  }
}

@media only screen and (min-width: 990px) and (max-width: 1024px) {

.html_header_top.html_header_sticky #header {
    position: fixed;
    background-color: white;
}

#header_meta {
    min-height: 32px !important;
}

#header_main {
    max-height: 100px;
}

.html_visible_cart .av-burger-menu-main {
    padding-right: 0px;
}

.avia-menu.av_menu_icon_beside {
    margin-top: 45px;
}

#top nav .social_bookmarks {
    margin-left: 5px;
    margin-right: 16px;
    top: 40% !important;
}

.avia-menu.av_menu_icon_beside {
    border: none;
}

.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}

.logo a img {
    max-height: 150px !important;
    padding-top: 5px !important;
}

#header .widget {
    right: -16%;
    position: absolute;
    top: -45%;
}

#wrap_all {width: 100% !important; margin:auto !important}
#header {width: 100% !important;}

#header .container {
    max-width: 100% !important;
}

.main_menu {
    right: 10% !important;
}

.header_bg {
    height: auto !important;
}

#menu-item-search {
display:none !important;
}
}

/*TABLET PORTRAIT*/

@media only screen and (min-width: 641px) and (max-width: 990px) {

.responsive #top #header {
position: static;
}

.header_bg {
    height: auto !important;
}

.logo a img {
    max-height: 200px !important;
}

.html_visible_cart .av-burger-menu-main {
    padding-right: 0px;
    padding-left: 10px;
}

.av-main-nav > li {
    margin-top: -50%;
}

.avia-menu.av_menu_icon_beside {
    margin-top: 80px !important;
margin-right:0px !important;
}

#header {
    width: 100% !important;
    max-height: 150px !important;
}

#header_main.container_wrap_logo {
    z-index: 999 !important;
}

.av_phone_active_right .phone-info {
    margin-right: 2% !important;
}

#header .widget {
    right: -13% !important;
top: -45% !important;
}

.main_menu .social_bookmarks {
    right: 6% !important;
}

#header_meta .container {
    width: 100% !important;
    padding: 0px 10px !important;
}

#header {
    max-height: 150px !important;
}

#menu-item-search {
display:none !important;
}

.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}
}

/*--MOBILE STYLES--*/

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

#header_main.container_wrap_logo, #top #header_meta {
    max-height: 200px !important;
}

#menu-item-search {
    position: relative;
    top: 0px;
    right: 15%;
    margin-top: 65% !important;
}

.html_visible_cart .av-burger-menu-main {
    padding-right: 40%;
    margin-top: -28% !important;
}

#top #header_meta li, #top #header_meta .phone-info {
    font-size: 12px !important;
}

.responsive #top .logo {
    width: 50% !important;
}

div .logo {
    margin-left: -1% !important;
}

#header .widget {
display:none !important;
}

.space {
    margin-top: 8% !important;
    margin-bottom: 4% !important;
    min-width: 200px !important;
}

.book-now-btn, .calendar-btn {
border:none !important;
}

.calendar-btn {
    padding: 9px 35px 8px 30px !important;
    margin-left: 10px !important;
}

.number {
    font-size: 20px;
    clear: right !important;
display:block !important;
}
}

/*mobile landscape*/

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

#menu-item-search {
    right: 0px !important;
    margin-top: 20% !important;
}

.html_visible_cart .av-burger-menu-main {
    padding-right: 10% !important;
    margin-top: 20% !important;
}

.avia-menu.av_menu_icon_beside {
    padding-right: 25px;
    margin-right: 20px !important;
}

.main_menu .social_bookmarks {
    margin-top: 10% !important;
    padding-right: 40px !important;
}
}

Hi Jordan,

Nope doesn’t change anything – still getting on mobile (and using my computer to simulate mobile to be sure my cache is clear) the’ X’ icon and the Magnifying Glass icon sitting over-top of the slide-out menu items as you scroll (when the menu is open of course).

Is there a way we can make these items sit in a different place (maybe to the furthest left of the slide out menu items) when the mobile slide-out menu is open and then return to where they are now when the menu is closed?

You are very welcome to have a crack it – I really appreciate your help :) – I know you will be careful but I must ask that you be very careful as this is a high traffic website with a very important online booking system (that takes payments).

Please see the private section for FTP access:

Hi Ismael,

I don’t want to come across ungrateful or rude but I have posted the images of what I want my mobile header to look like and my problem twice now and each time I had to wait again for someone to assess the problem.

I know there are a lot of custom header styles, but as I said I tried to remedy the issue myself in the meantime due to not knowing how to acheive this the most suitable way.

Please do not bump me back down, I have given my login details, screenshots, my active css and as detailed as I could be with descriptions on what I need help with.

I have been able to adjust the old enfold burger menu in the past but with the new burger menu position and functionality I just don’t know how to go about it.

That O.K. Like I said I wasn’t trying to come across as rude I am just a little frustrated is all.
This didn’t work :( It moves my closed burger menu and icon into the wrong place and doesn’t fix the x and search icon sitting on top of the menu items when scrolling down the open mobile menu.

• This reply was modified 7 years, 2 months ago by Briana. Reason: I thought I solved it - Was wrong

This is a lifesaver! THANK YOU.
I swear I removed my old menu/search icon position styles before adding yours before but I must have made a mistake. This worked with both sets of css and a few adjustments to the values. I can definitely use this in the future too – again, thanks for understanding my frustration and sticking with it.

You can close this ticket.