-
Posts
-
Hi,
I have some trouble making my Enfold-site mobile friendly for resolutions up to 1024px.
For ‘Menu Items for mobile’, I’ve chosen: Activate for Smartphones and Tablets (browser width below 990px).
And that is of course not enough, so I have also added the CSS you are recommending:
/* Activate burger menu */
@media only screen and (max-width: 1224px) {
#top #header .av-main-nav > li.menu-item {
display: none!important;
}
#top #header .av-burger-menu-main {
cursor: pointer;
display: block!important;
}}
And yes, the CSS is activating the burger menu for higher resolutions (here up to 1224px), but the rest of the top/logo area is still doing as for desktop layout. I would like the whole top/logo area to be mobile friendly for the resolution, I’m choosing. Because the top/logo area is taking quite a lot of space for resolutions like 1024px.How can I do that?
Thank you.By now I have solved the issue by:
1) Copying layout.css into child-theme.
2) Changed the places with 989 to 1024.
3) And added to functions.php:
add_action( ‘wp_enqueue_scripts’, ‘wp_change_layoutcss’, 20 );
function wp_change_layoutcss() {
wp_dequeue_style( ‘avia-base’ );
wp_enqueue_style( ‘avia-base-child’, get_stylesheet_directory_uri().’/css/layout.css’ );
}Let me know, if I could do it in any better way.
- You must be logged in to reply to this topic.