Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 29, 2018 at 2:30 am #991012
    hybridE4t

    Hello. I’ve just updated to the latest version of Enfold on my dev site and the burger menu has disappeared. I’ve experimented with various bit of css from other threads but without luck. Any ideas? Dev site URL in the private content area below. Many thanks.

    July 29, 2018 at 5:24 pm #991111
    Victoria

    Hey hybridE4t,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    July 29, 2018 at 8:54 pm #991291
    hybridE4t

    Thank you!

    July 30, 2018 at 5:56 am #991388
    Ismael

    Hi,

    Thanks for the update.

    Did you update the header.php file in the child theme? Please disable it temporarily or use the latest version of the file.

    Best regards,
    Ismael

    July 30, 2018 at 7:11 am #991415
    hybridE4t

    The only difference is child:

    <!DOCTYPE html>
    <html <?php language_attributes(); ?> class="<?php echo "html_{$style} ".$responsive." ".$preloader." ".$av_lightbox." ".$filterable_classes." ".$av_classes_manually ?> ">
    <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/layout.css" media="screen" />
    <head><meta http-equiv="Content-Type" content="text/html; charset=euc-jp">

    …vs Parent:

    <!DOCTYPE html>
    <html <?php language_attributes(); ?> class="<?php echo "html_{$style} ".$responsive." ".$preloader." ".$av_lightbox." ".$filterable_classes." ".$av_classes_manually ?> ">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />

    July 30, 2018 at 4:46 pm #991586
    Victoria

    Hi hybridE4t,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 1024px) {
  nav.main_menu, #menu-item-search {
    display: block !important;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 30, 2018 at 5:37 pm #991634
    hybridE4t

    Thanks for the suggestion! I just tried this (both in the child and the parent’s custom.css via Appearance/Editor) but sadly it made zero difference. I have since backed out the change to the parent and left the new code in the child custom.css

    • This reply was modified 5 years, 10 months ago by hybridE4t. Reason: Clarified I made the change via Appearance/Editor in case you are able to check via the same screen
    July 31, 2018 at 7:23 am #991805
    hybridE4t

    I should perhaps also add that the main desktop menu correctly appears and disappears based on screen size (I have the threshold at 768px). It’s only the mobile menu which never appears i.e. small screens are left with no menu.

    July 31, 2018 at 9:14 am #991842
    Ismael

    Hi,

    The mobile menu is displaying now. We’ve added these css codes in the style.css file.

    @media only screen and (max-width: 767px) {
	.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
		display: block;
	}

	.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
    	color: #284c8f;
	}

	.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: #848484;
}
}

    Best regards,
    Ismael

    July 31, 2018 at 4:40 pm #991980
    hybridE4t

    Thank you Ismael, it’s back – this is great! Two more questions for you if I may:
    1. How to make the magnifying glass a matching grey colour? At the moment it is white so gets lost against the white background.
    2. How to stop the magnifying glass overlapping the logo when on a small screen size e.g. smartphone?

    August 1, 2018 at 7:50 am #992220
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
#menu-item-search a {
    color:grey !important;
}
span.logo img {
    max-width: 80%;
    float: left;
}
}

    Best regards,
    Rikard

    August 1, 2018 at 12:45 pm #992369
    hybridE4t

    Awesome. I had to add this to the stylesheet to get it to work but it’s all good now. Thanks for the amazing support!

    August 1, 2018 at 11:24 pm #992617
    Nikko

    Hi hybridE4t,

    Glad to hear that :)
    Please feel free to comeback if you need further assistance.
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Mobile burger menu disappeared after Enfold upgrade’ is closed to new replies.