Mobile Menu Incompatible

Mattdim805 · September 2015

When clicking on the menu icon on www.2ndchanceinsurance.com using my iPhone 5s, the navigation links overlap my logo. It's nearly impossible to read these like this. Is there a way I can fix this so it displays correctly (like with a background color or something)?

Mattdim805 · September 2015

And just to specify, I have tried enabling and disabling the following options in the Responsive > General section of BeTheme Options:

Hover Effects
Menu Button | Sticky
Section Background Image

And I am also using a custom menu that is applied as the Main Menu.

Albert · September 2015

Hi,

please remove all your custom css because this is the reason why menu does not work properly with the logo on mobile. You did something wrong inside of your customizations.

Mattdim805 · September 2015

I can't just go and remove all of my custom CSS. I've spent hours and hours customizing my website to make it look how it does now. All of that work would be lost if I did that! Is there any way you could at least review the CSS code to see if something may stand out to you as being a potential conflict? I haven't made major changes to the pre-existing CSS code, so I'm not sure what I could have done that would have messed up the mobile menu...

Mattdim805 · September 2015

h2 { font-weight: 400; }

h3 { font-weight: 400; }

h4 { font-weight: 400; }

#Wrapper { border-top: 4px solid #cbaa2a; }

#Top_bar.is-sticky { background: rgba(0, 0, 0, 0.9); box-shadow: 0 0 0 0 rgba(0,0,0,0); }

#Top_bar a.responsive-menu-toggle { color: #ff9700; }

@media only screen and (min-width: 1240px) {

#Top_bar .menu > li > a:after { position: absolute; left: 0; bottom: 8px !important; top: auto; display: block; height: 6px; width: 100%; background: url(http://www.2ndchanceinsurance.com/wp-content/uploads/2015/08/home_taxi_menu_active.png) no-repeat left bottom !important; }

#Top_bar .menu > li > a span:not(.description) { padding: 0 12px; }

#Top_bar .menu > li > a { margin: 0 8px; }

}

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

#intro { padding-top: 0px !important; }

}

/* Buttons */

a.button_theme, a.tp-button.button_theme, button, input[type="submit"], input[type="reset"], input[type="button"] { font-family: "Roboto Slab"; font-weight: 700; background-image: url(http://www.2ndchanceinsurance.com/wp-content/uploads/2015/08/home_taxi_button_bg.png); background-repeat: no-repeat; background-position: top right; }

/* Phone */

.phone { font-family: "Roboto Slab"; font-size: 48px; line-height: 48px; color: #ff9700; font-weight: 700; padding-bottom: 20px; background: url(http://www.2ndchanceinsurance.com/wp-content/uploads/2015/08/home_taxi_phone.png) no-repeat 5px bottom; }

p.phone a { color: #ff9700; }

p.phone a:hover { color: #2991d6; }

/* Price */

.price { font-family: "Roboto Slab"; font-size: 60px; line-height: 60px; color: #1c1611; font-weight: 400; margin-bottom: 7px; }

/* Icon box */

.icon_box .desc { margin: 0 12%; }

/* Image frame */

.image_frame, .wp-caption { border-width: 4px; border-radius: 10px; box-shadow: -3px 6px 0 0 #e8a600; }

.image_frame .image_wrapper { border-radius: 5px; z-index: 1; }

.image_frame.no_border { border-width: 0; box-shadow: 0 0 0 0 rgba(0,0,0,.0); }

/* Form */

input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select, .woocommerce .quantity input.qty {

background-color: #f5f5f5; border: 2px solid #c49b2c; border-radius: 2px;

}

input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus {

border: 2px solid #c49b2c;

}

.order_form input[type="submit"] { font-size: 140%; padding: 12px 40px; }

/* Footer */

#Footer { background-repeat: repeat; }

/* Back to top */

#Footer .footer_copy a#back_to_top { background-color: #000; }

#Footer .footer_copy a#back_to_top .button_icon i { color: #fff; }

/* Action Bar */

#Action_bar .contact_details { float: right !important; }

#Action_bar .contact_details li.slogan {color: #FFFFFF; }

#Action_bar .contact_details li.phone { color: #FFFFFF; font-size: 15px; } a {color: #2991d6; } a:hover {color: #ff9700; }

#Action_bar .contact_details li.mail { color: #FFFFFF; font-size: 15px; } a {color: #2991d6; } a:hover {color: #ff9700; }

#Action_bar .phone { background-image: none !important; }

#Action_bar .social { display: none !important; }

/* Header */

#Subheader ul.breadcrumbs { text-align: left; width: 100%; margin-top: 10px; }

.header-classic #Top_bar { height: 120px; }

.header-classic #Top_bar #logo img { max-height: 165px; }

#Top_bar #logo { padding: 2px; height: 130px !important; }

#Top_bar .logo { position: absolute; z-index: 1; }

#Top_bar #logo img { max-height: 100%;}

@media only screen and (min-width: 960px) {

#Top_bar #logo img { max-width: 190px;}

}

#Top_bar .menu > li > a::after { background: none !important; }

#Top_bar .menu > li > a { color: #2991d6; }

#Top_bar .menu > li > a:hover { color: #ff9700; }

Mattdim805 · September 2015

I ran my CSS changes through the Beyond Compare tool I've seen you guys recommend previously, and started removing the lines of code I had added one by one. I found that the following line of code was the culprit:

#Top_bar .logo { position: absolute; z-index: 1; }

The problem with removing that line of code though is that when viewing my website on a desktop, it forces the logo to hide behind the background image in the body (on the home page), and behind the header on the blog and contact us pages. Is there a way I can get that logo to display normally, on top of the background image and header, without the above code? Or is there a way to manipulate the above code so it doesn't prevent the mobile menu from operating correctly?

Albert · September 2015

You can apply this css for desktop devices only because this is the only solution in that case. This can be accomplished with below css:

@media only screen and (min-width: 1240px) {
    #Top_bar .logo { position: absolute; z-index: 1; }
}

Mattdim805 · September 2015

Thank you so much guys! Your suggestion worked perfectly! You can close this ticket.

Albert · September 2015

We're glad to hear that

Mobile Menu Incompatible

Comments

This discussion has been closed.