-
Posts
-
Hi,
The header menu doesn’t format properly when you are viewing it on a tablet sized screen. The menu goes over the logo. Here is the site
http://businessoceans.com/bomarketing/
I saw another post that was similar and it had this solution: the problem is that when I did this, the was no Nav menu at all for certain sizes.
@media only screen and (max-width: 1000px) {
.responsive #header .main_menu ul {display: none;}
}
Please help
On the same topic of responsiveness…
Certain elements are also not formatting properly at the tablet screen size. For example the first promo box on the homepage.
Hi,
I have the same problem.
When the viewport gets around 990px the navigation slides under the logo. If the navigation has not many items it doesn’t happen, but if the navigation is long enough (more menu items) it happens. Somehow the responsiveness is not working correctly here.
I’ve noticed that this only happens with the child theme. When I activate the normal Enfold theme everything is ok.
The only mods in the child theme are:
Quick CSS:
#top .avia-icon-list .iconlist_title {
color: #d98927
}
#top .avia-icon-list .iconlist_title a{
text-decoration: underline;
}
#top .avia-icon-list .iconlist_title a:hover{
text-decoration: none;
color: #88bbc8
}
Style.css:
#top .avia-slideshow-button{ text-transform: uppercase; color:#fff; border-radius: 20px; padding:7px 16px ; margin-top:20px; display: inline-block; text-decoration: none; font-weight: bold; background-color: rgba(0,0,0,0.2);
border-style: solid;
border-width: 3px;
}
No other modifications.
Cheers,
Gonzo
Hi All,
What you can do is modify the width at which the responsive menu comes in to use. In your theme files open js>avia.js and look for:
var menu = header.find('.main_menu ul:eq(0)'),
first_level_items = menu.find('>li').length,
bottom_menu = $('html').is('.bottom_nav_header'),
switchWidth = 767;Change the 767 value to something like 989 so that the menu gets replaced with the responsive button/menu for tablets.
Regards,
Devin
Thanks Devin,
Now I need to find out how to place this function in my child theme, so that customization of the avia.js doesn’t disappear each time I upgrade the enfold theme folder with the latest version.
Cheers,
Gonzo
You need to deregister the default avia.js (which can be found in the parent theme folder) in your child theme functions.php and then you need to create a copy of enfold/js/avia.js in your child theme. Afterwards modify avia.js (which is located in your child theme folder) and register the child theme avia.js with
add_filter('init', 'avia_replace_scripts');
function avia_replace_scripts()
{
wp_deregister_script('avia-default');
wp_dequeue_script( 'avia-default' );
$template_url = get_template_directory_uri();
wp_register_script( 'avia-default', $template_url.'/js/avia.js', array('jquery'), 1, true );
wp_enqueue_script( 'avia-default' );
}Ok I did what devin said and the small nav bar pops up, however, the regular nav bars stays and overlaps with the logo.
How do I set the nav menu to disappear when the mobile menu comes up?
You’ll also need to adjust the media query as you’ve noticed. So Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
@media only screen and (max-width: 767px) {
.responsive #header .main_menu ul { display: none; }
}Adjust the 767px as needed.
- The topic ‘Responsive header not working’ is closed to new replies.