Sweet! This works perfectly now. Thanks, Ismael.

Thank you for your great support.

I have made some CSS test and now I have found a solution that is great for me.

This topic can be closed.

Please disregard #1…I figured out how to fix the CSS so it would show up how I wanted.

But I do still have the issue with #2 above. On my boss’ computer (PC – IE 11 browser), the responsive menu came up instead of the regular menu. It had previously worked just fine and then when we went to look at it the other day (I hadn’t made any changes to the site since we had last looked at it), the menu was gone and there was a drop-down in the upper right (presumably the responsive menu).

Any idea why this would happen or how to prevent this from happening in the future?

http://phoenixfireops.com/ems/

Here is the custom css. There are 2 problems with the css.
1. On a Samsung Tablet the slide out menu text has poor resolution and the menu container doesnt center on the page like the dropdown menu.
2. I need to change the css for the parent and the second level parent in the menu.

#mobile-advanced a, #mobile-advanced .mega_menu_title { color: #000000 !important; font-size: 20px;background:#F0F0F0 ;line-height:35px;}
#mobile-advanced a, #mobile-advanced .mega_menu_title: hover { color: #ffffff !important; background: #ffffff; }
div .logo { left: 35%; }
#advanced_menu_toggle:before { content: ‘Select a page >’; font-size: 15px; margin-bottom: 10px; }

@media only screen and (max-width: 767px) {
.responsive #header_main .container {
height: 140px !important;
}
.responsive .logo {
position: relative; }
#advanced_menu_toggle, #advanced_menu_hide {
right: 31%;
top: 75%;
background:#f8f8f8 ;
line-height: 12px;
height: 27px;
width: 120px; }}
@media only screen and (max-width: 767px) {
#advanced_menu_hide {
top: 50px;
right: 50px;
height: 40px;
line-height: 35px;
width: 40px;
}}
#mobile-advanced .sub-menu li > a:before { top: 2px; }
#mobile-advanced .sub-menu li > a { font-size: 16px;background:#ffffff;padding-left:20px;}

Hi Josue,

The name and email text boxes are much taller than they are supposed to be by default. Olark support told me it is due to the following code in the theme css:

#top textarea { 
min-height: 60px; 
line-height: 1.5em; 
} 

I’d like to remove those rules just for the chat box if possible.

Thanks!

Best,
Jonathan

Hi,

I updated the theme to 2.5.4 using the Theme Update option within Enfold Theme Options. The problem of the responsive menu on iPad remains unchanged. The site appears exactly the same on iPad in terms of the header menu (see previous screenshots).

Some of my current Enfold Theme Options settings are as follows:
Header Type: Small Fixed Header
Append search icon to main menu: Unchecked
Responsive Header Main Menu: Display as Slide Out Menu
Quick CSS:
.main_menu ul:first-child > li > a {font-size:15px;}

.title_container .breadcrumb {
display: none !important;
}

#js_sort_items .sort_by_cat a{
font-size: 16px;
}

h1.main-title.entry-title {
font-size:24px;color:#000000;
}

.header_color .main_menu .menu ul li a:hover {
background-color: #eae2db;
}

/*ROLLOVER/CURRENT MENU DECORATION*/
.header_color .avia-menu-fx {
background-color: #423222;
}
.header_color .avia-menu-fx .avia-arrow, .header_color .main_menu ul:first-child >li > ul, #top .header_color .avia_mega_div > .sub-menu {
border-color: #423222;
}

.alternate_color .avia-icon-list .iconlist_icon, .main_color .avia-icon-list .iconlist_icon { background-color: #423222; }

#top #gform_4 input[type=”text”],
#top #gform_5 input[type=”text”],
#top #gform_6 input[type=”text”],
#top #gform_7 input[type=”text”],
#top #gform_9 input[type=”text”],
#top #gform_10 input[type=”text”],
#top #gform_11 input[type=”text”] {
width:474px;
}

Thanks!

• This reply was modified 12 years ago by v2ginteractive.