Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 29, 2018 at 11:23 pm #963976
    Kelly Erickson

    I see there are quite a few posts about the menu overlapping the logo, but I’m hoping you can help me figure out a good strategy for my particular problem.
    See the private notes for the direct links and login information

    Essentially what’s happening is I have the burger menu turning “on” at 960 pixels using the following code: 

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

    Works fine until you get the window muuuuuuch much small then the burger menu is overlapping, and the social icons are still there.

    I found some additional code to remove the social icons from the header on mobile layout, but I would like to keep them available somehow.

    Is there way to stack the three elements so it’s Logo centered at top, then below that the burger menu on the right, social media icons on the left? Or is that too crazy?

    The other option could be to hide the social icons in the flyout menu. I just want to make sure my burger menu still doesn’t overlap the logo, as it still does when I hide the social icons (see screenshot link below)

    Any other recommendations would be wonderful!

    Thanks in advance.

    June 1, 2018 at 8:24 am #965107
    Rikard

    Hey kellyCraftMedia,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-width: 80%;
}
}

    Best regards,
    Rikard

    June 7, 2018 at 12:07 am #968122
    Kelly Erickson

    That’s perfect, thank you!

    June 7, 2018 at 12:09 am #968123
    Kelly Erickson

    Oh sorry I hit that too soon!

    It works wonderfully but we’d still like to have the social media icons appear somewhere… is there an easy way to have them moved to the flyout menu when in mobile?

    Thanks!

    June 7, 2018 at 2:40 am #968147
    Vinay

    Hi,

    Glad it worked for you. To add the social icons in mobile menu please check this post https://kriesi.at/support/topic/social-media-icons-in-mobile-menu/#post-749838

    Best regards,
    Vinay

    June 7, 2018 at 4:19 am #968161
    Kelly Erickson

    Hmm that didn’t seem to work – it removed all my social icons except for the Facebook on the full screen, and when you viewed it on mobile all the logos appeared but they were stacked to the right of the burger menu, not even on the flyout at all.

    Screenshots included in the private content.

    Thank you!

    June 11, 2018 at 2:48 am #970916
    Ismael

    Hi,

    Thanks for the update. Please try this filter in the functions.php file.

    add_filter( 'wp_nav_menu_items', 'avf_add_search', 9999, 2 );
function avf_add_search( $items, $args ) {
	$social = avia_get_option('social_icons');
	$icons = '';
	if ($args->theme_location == 'avia')
	{
		foreach($social as $icon) {
			$icons .= '<li class="menu-item menu-item-social social_bookmarks_'.$icon['social_icon'].' av-social-link-'.$icon['social_icon'].' only-mobile menu-item-'.$icon['social_icon'].'"><a target="_blank" href="'.$icon['social_icon_link'].'" aria-hidden="true" '.av_icon_string($icon['social_icon']).'><span class="avia_hidden_link_text">'.$icon['social_icon'].'</span></a></li>';
		}
		
		$items = $icons . $items;
	}
	return $items;
}

    Add this css code.

    @media only screen and (min-width: 989px) {
  /* Add your Desktop Styles here */
  .only-mobile {
    display: none !important;
  }
}

    Best regards,
    Ismael

    June 11, 2018 at 5:44 pm #971313
    otavioef

    Hey, Guys. Sorry for just getting into your post. I found this useful for me.

    Ismael, thank you for the codes, they worked for me. Now the social icons appear on top of mobile menu.

    I have 3 icons and they are displayed in different rows (one below the other).

    1 – How can I put them all in the same row…. just one beside the other?
    2 – Also, they are collored like the main color of my site. How can I apply my own color to each one?
    3 – How can I put them below the menu itens… just at the end of the mobile menu?

    Thank you very much

    • This reply was modified 6 years, 5 months ago by otavioef.
    June 11, 2018 at 7:57 pm #971365
    Kelly Erickson

    Lovely – works great! Except they are stacked. Would love to get them side by side.

    Thanks!

    June 13, 2018 at 3:01 am #971996
    Ismael

    Hi,

    Glad it worked. Please add these css codes to get them beside each other.

    #top #wrap_all #header #av-burger-menu-ul .only-mobile {
  display: inline-block;
  border-bottom: 0;
}

#top #wrap_all #header #av-burger-menu-ul .only-mobile a {
  padding: 20px;
  border: 0;
}

    2 – Also, they are collored like the main color of my site. How can I apply my own color to each one?

    Each icon has its own unique css class attribute. Example.

    #top #wrap_all #header #av-burger-menu-ul .social_bookmarks_twitter a {
 color: red;
}

#top #wrap_all #header #av-burger-menu-ul .social_bookmarks_dribble a {
 color: green;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.