Drop Down Navigation Issue in Mobile Devices IPS4.6.6

Drop Down Navigation Issue in Mobile Devices IPS4.6.6
clap-icon -
0
Pushpendra Pushpendra
Invision CommunityTutorial
October 15, 2021

Loading

After upgrading from 4.5 to 4.6 you may face dropdown issues if you are using a custom theme. The blocks in the lower half of the menu may appear as separate blocks. This may block other lower menu items. A quick solution for this is here

<div id='elMobileDrawer' class='ipsDrawer ipsHide'>
	<div class='ipsDrawer_menu'>
		<a href='#' class='ipsDrawer_close' data-action='close'><span>&times;</span></a>
		<div class='ipsDrawer_content ipsFlex ipsFlex-fd:column'>
			{{if \IPS\Member::loggedIn()->member_id }}
				<div class='elMobileDrawer__user ipsBorder_bottom ipsAreaBackground_reset ipsPadding_horizontal ipsPadding_vertical:half ipsPos_sticky ipsFlex ipsFlex-jc:between ipsFlex-ai:center ipsFlex-fw:wrap'>
					<div class='ipsFlex-flex:11'>
						<ul class='elMobileDrawer__user-panel ipsList_reset ipsType_blendLinks ipsFlex ipsFlex-ai:center'>
							<li class='ipsMargin_right:half'>
								{template="userPhoto" group="global" app="core" params="\IPS\Member::loggedIn(), 'mini'"}
							</li>
							<li>
								<div class='ipsType_light'>{lang="logged_in_as_headline"}</div>
								<div class='ipsType_dark ipsType_large ipsType_bold'>{{if isset( $_SESSION['logged_in_as_key'] )}}{lang="front_logged_in_as" sprintf="$_SESSION['logged_in_from']['name']"} {{endif}}{{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members', 'front' ) )}}<a href='{member="url()"}' title='{lang="view_my_profile"}'>{member="name"}</a>{{else}}{member="name"}{{endif}}</div>
							</li>
						</ul>
					</div>
					<ul id='elUserNav_mobile' class='ipsList_inline signed_in ipsClearfix'>
						<li class='cNotifications cUserNav_icon'>
							<a href='#elMobNotifications_menu' id='elMobNotifications' data-ipsMenu data-ipsMenu-menuID='elFullNotifications_menu' data-ipsMenu-closeOnClick='false'>
								<i class='fa fa-bell'></i> <span class='ipsNotificationCount {{if !member.notification_cnt}}ipsHide{{endif}}' data-notificationType='notify'>{member="notification_cnt"}</span>
							</a>
						</li>
						{{if !\IPS\Member::loggedIn()->members_disable_pm and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'messaging' ) )}}
							<li class='cInbox cUserNav_icon'>
								<a href='#elMobInbox_menu' id='elMobInbox' data-ipsMenu data-ipsMenu-menuID='elFullInbox_menu' data-ipsMenu-closeOnClick='false'>
									<i class='fa fa-envelope'></i> <span class='ipsNotificationCount {{if !\IPS\Member::loggedIn()->msg_count_new}}ipsHide{{endif}}' data-notificationType='inbox'>{member="msg_count_new"}</span>
								</a>
							</li>
						{{endif}}
						{{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'modcp' ) ) and \IPS\Member::loggedIn()->modPermission('can_view_reports')}}
							<li class='cReports cUserNav_icon'>
								<a href='#elMobReports_menu' id='elMobReports' data-ipsMenu data-ipsMenu-menuID='elFullReports_menu' data-ipsMenu-closeOnClick='false'>
									<i class='fa fa-warning'></i> {{if \IPS\Member::loggedIn()->reportCount()}}<span class='ipsNotificationCount' data-notificationType='reports'>{member="reportCount()"}</span>{{endif}}
								</a>
							</li>
						{{endif}}
					</ul>
				</div>
			{{else}}
				<div class='ipsPadding ipsBorder_bottom'>
					<ul class='ipsToolList ipsToolList_vertical'>
						<li>
							<a href='{url="app=core&module=system&controller=login" seoTemplate="login"}' id='elSigninButton_mobile' class='ipsButton ipsButton_light ipsButton_small ipsButton_fullWidth'>{lang="sign_in"}</a>
						</li>
						{{if \IPS\Login::registrationType() != 'disabled'}}
							<li>
								{{if \IPS\Login::registrationType() == 'redirect'}}
									<a href='{expression="\IPS\Settings::i()->allow_reg_target"}' target="_blank" rel="noopener" class='ipsButton ipsButton_small ipsButton_fullWidth ipsButton_important'>{lang="sign_up"}</a>
								{{else}}
									<a href='{url="app=core&module=system&controller=register" seoTemplate="register"}' {{if \IPS\Login::registrationType() == 'normal'}}data-ipsDialog data-ipsDialog-size='narrow' data-ipsDialog-title='{lang="sign_up"}' data-ipsDialog-fixed='true'{{endif}} id='elRegisterButton_mobile' class='ipsButton ipsButton_small ipsButton_fullWidth ipsButton_important'>{lang="sign_up"}</a>
								{{endif}}
							</li>
						{{endif}}
					</ul>
				</div>
			{{endif}}
			{{if \IPS\Member::loggedIn()->canHaveAchievements() and \IPS\core\Achievements\Rank::show() and \IPS\Member::loggedIn()->member_id && \IPS\core\Achievements\Rank::getStore() and $rank = member.rank()}}
				<div class='elMobileDrawer__rank ipsAreaBackground_reset ipsPos_sticky ipsPadding_horizontal ipsPadding_vertical:half ipsBorder_top'>
					<div class='elUserNav_achievements ipsFlex ipsGap:4 ipsGap_row:0'>
						<div class='elUserNav_achievements__icon'>{$rank->html('ipsDimension:3')|raw}</div>
						<div class='elUserNav_achievements__content'>
							<div class='ipsType_light'>{lang="achievements_current_rank"}</div>
							<div><strong class='ipsType_large'>{$rank->_title}</strong></div>
							
							{{if $nextRank = member.nextRank()}}
								<div class='ipsMargin_top:half'>
									<div>
										<div class='ipsAchievementsProgress'>
											<div style='width: calc({expression="\IPS\Member::loggedIn()->achievements_points"} / {$nextRank->points} * 100%)'></div>
										</div>
									</div>
									<div class='ipsType_small ipsType_light'>{lang="achievements_next_rank" pluralize="$nextRank->points - \IPS\Member::loggedIn()->achievements_points"}</div>
								</div>
							{{endif}}
						</div>
					</div>
				</div>
			{{elseif \IPS\Member::loggedIn()->canHaveAchievements() and \IPS\Settings::i()->achievements_rebuilding}}
				<div class='elMobileDrawer__rank ipsAreaBackground_reset ipsPos_sticky ipsPadding_horizontal ipsPadding_vertical:half ipsBorder_top'>
					<div class='elUserNav_achievements ipsFlex ipsGap:4 ipsGap_row:0 ipsType_light'>
						<div class='elUserNav_achievements__icon ipsFlex-flex:00'><i class="fa fa-info-circle fa-fw ipsType_large"></i></div>
						<div class='elUserNav_achievements__content ipsFlex-flex:11'>
							<p class='ipsType_reset ipsType_light'>
								{lang="ranks_are_being_recalculated"}
							</p>
						</div>
					</div>
				</div>
			{{endif}}
			<ul class='ipsDrawer_list ipsFlex-flex:11'>
				{{if \IPS\Member::loggedIn()->member_id}}
					<li class='ipsDrawer_itemParent'>
						<h4 class='ipsDrawer_title'><a href='#'>{lang="mobile_menu_account"}</a></h4>
						<ul class='ipsDrawer_list'>
							<li data-action="back"><a href='#'>{lang="mobile_menu_back"}</a></li>
							{{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members', 'front' ) )}}
								<li><a href='{member="url()"}' title='{lang="view_my_profile"}'>{lang="menu_profile"}</a></li>
							{{endif}}
							{{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'messaging' ) ) and \IPS\Member::loggedIn()->members_disable_pm AND \IPS\Member::loggedIn()->members_disable_pm != 2}}
								<li><a href='{url="app=core&module=messaging&controller=messenger&do=enableMessenger" seoTemplate="messaging" csrf="true"}' title='{lang="go_to_messenger"}' data-confirm data-confirmMessage='{lang="messenger_disabled_msg"}'>{lang="menu_messages"}</a></li>
							{{endif}}
							{{if \IPS\Member::loggedIn()->group['g_attach_max'] != 0}}
								<li><a href='{url="app=core&module=system&controller=attachments" seoTemplate="attachments"}'>{lang="my_attachments"}</a></li>
							{{endif}}
                            {{if \IPS\Member::loggedIn()->hasAcpRestriction( 'core', 'promotion', 'promote_manage' ) and \IPS\core\Promote::promoteServices()}}
                            <li><a href='{url="app=core&module=promote&controller=promote&do=view" seoTemplate="promote_manage"}'>{lang="promote_manage_link"}</a></li>
                            {{endif}}
                            {{if \IPS\Application::appIsEnabled('nexus') and settings.nexus_subs_enabled}}
							<li><a href='{url="app=nexus&module=subscriptions&controller=subscriptions" seoTemplate="nexus_subscriptions"}'>{lang="nexus_manage_subscriptions"}</a></li>
							{{endif}}
							<li><a href='{url="app=core&module=system&controller=followed" seoTemplate="followed_content"}'>{lang="menu_followed_content"}</a></li>
							<li id='elAccountSettingsLinkMobile'><a href='{url="app=core&module=system&controller=settings" seoTemplate="settings"}' title='{lang="edit_account_settings"}'>{lang="menu_settings"}</a></li>
							{{if settings.ignore_system_on}}
			                	<li><a href='{url="app=core&module=system&controller=ignore" seoTemplate="ignore"}'>{lang="menu_manage_ignore"}</a></li>
			                {{endif}}
							{{if ( \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'modcp' ) ) AND \IPS\Member::loggedIn()->modPermission() ) or ( \IPS\Member::loggedIn()->isAdmin() AND \IPS\SHOW_ACP_LINK )}}
								{{if \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'modcp' ) ) AND \IPS\Member::loggedIn()->modPermission()}}
									<li><a href='{url="app=core&module=modcp" seoTemplate="modcp"}'>{lang="menu_modcp"}</a></li>
								{{endif}}
								{{if \IPS\Member::loggedIn()->isAdmin() AND \IPS\SHOW_ACP_LINK }}
									<li><a href='{expression="\IPS\Http\Url::baseURL() . \IPS\CP_DIRECTORY"}' target='_blank' rel="noopener">{lang="menu_admincp"} <i class='fa fa-lock'></i></a></li>
								{{endif}}
							{{endif}}
						</ul>
					</li>
				{{endif}}

				{{$primaryBars = \IPS\core\FrontNavigation::i()->roots();}}
				{{$subBars = \IPS\core\FrontNavigation::i()->subBars();}}
				
				{{foreach $primaryBars as $id => $item}}
					{{if $item->canView()}}
						{{$children = $item->children();}}
						{{if ( $subBars && isset( $subBars[ $id ] ) && \count( $subBars[ $id ] ) ) || $children}}
							<li class='ipsDrawer_itemParent'>
								<h4 class='ipsDrawer_title'><a href='#'>{$item->title()}</a></h4>
								<ul class='ipsDrawer_list'>
									<li data-action="back"><a href='#'>{lang="mobile_menu_back"}</a></li>
									{{$showSelfLink = true;}}
									{{if $subBars && isset( $subBars[ $id ] ) && \count( $subBars[ $id ] )}}
										{{// Determine whether we should show the parent link as a clickable sub item by comparing child links.}}
										{{// If the *same* link exists as a child item, don't show it twice}}
										{{foreach $subBars[ $id ] as $child}}
											{{if $child->canView()}}
												{{if $children = $child->children()}}
													{{foreach $children as $subChild}}
														{{if method_exists( $subChild, 'link' ) && $subChild->link() && (string) $subChild->link() == (string) $item->link()}}
															{{$showSelfLink = false;}}
															{{break 2;}}
														{{endif}}
													{{endforeach}}
												{{elseif method_exists( $child, 'link' ) && $child->link() && (string) $child->link() == (string) $item->link()}}
													{{$showSelfLink = false;}}
													{{break;}}
												{{endif}}
											{{endif}}
										{{endforeach}}
									{{endif}}
													
									{{if $showSelfLink && method_exists( $item, 'link' ) and (string) $item->link() !== \IPS\Settings::i()->base_url}}
										<li><a href='{$item->link()}'>{$item->title()}</a></li>
									{{endif}}
									{{if $children}}
										{template="mobileNavigationChildren" group="global" app="core" params="$children"}
									{{endif}}
									{{if $subBars && isset( $subBars[ $id ] ) && \count( $subBars[ $id ] )}}
										{template="mobileNavigationChildren" group="global" app="core" params="$subBars[ $id ]"}
									{{endif}}	
								</ul>
							</li>
						{{else}}
							<li><a href='{$item->link()}' {{if method_exists( $item, 'target' ) AND $item->target()}}target='{$item->target()}'{{if $item->target() == '_blank'}} rel="noopener"{{endif}}{{endif}}>{$item->title()}</a></li>
						{{endif}}
					{{endif}}
				{{endforeach}}
				{{if \IPS\Member::loggedIn()->member_id}}
					<li>
						<a data-action="markSiteRead" data-controller="core.front.core.markRead" href='{url="app=core&module=system&controller=markread" seoTemplate="mark_site_as_read" csrf="true"}'>{lang="mark_site_read_button"}</a>
					</li>
					<li>
						<a href='{url="app=core&module=system&controller=login&do=logout" csrf="true"}'>
							{{if isset( $_SESSION['logged_in_as_key'] )}}{lang="switch_to_account" sprintf="$_SESSION['logged_in_from']['name']"}{{else}}{lang="sign_out"}{{endif}}
						</a>
					</li>
				{{endif}}
			</ul>


		</div>
	</div>
</div>

<div id='elMobileCreateMenuDrawer' class='ipsDrawer ipsHide'>
	<div class='ipsDrawer_menu'>
		<a href='#' class='ipsDrawer_close' data-action='close'><span>&times;</span></a>
		<div class='ipsDrawer_content ipsSpacer_bottom ipsPad'>
			<ul class='ipsDrawer_list'>
				<li class="ipsDrawer_listTitle ipsType_reset">{lang="add"}...</li>
				{{foreach \IPS\Member::loggedIn()->createMenu() as $k => $url}}
					<li>
						<a href="{$url['link']}"
							{{if isset( $url['extraData'] )}}
								{{foreach $url['extraData'] as $data => $v}}
									{$data}="{$v}"
								{{endforeach}}
							{{endif}}
							{{if isset($url['title']) AND $url['title']}} data-ipsDialog-title='{lang="$url['title']"}'{{endif}}
							{{if isset($url['flashMessage'])}} data-ipsdialog-flashmessage="{lang="$url['flashMessage']"}"{{endif}} data-ipsdialog-fixed="true"
							>{lang="$k"}</a>
					</li>
				{{endforeach}}
			</ul>
		</div>
	</div>
</div>
Related Posts
Leave a Reply

Your email address will not be published.Required fields are marked *

Close
Search

Hit enter to search or ESC to close

cookie By using this website, you agree to our cookie policy. Close