nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PopupMobile and Bootstrap Nav

dcoley

Does anyone have any ideas on how to use the popupMobile and a bootstrap navbar-fixed-top together? No matter what I try css-wise for z indexing and/or padding I cannot get the popupMobile's navigation bar to display on top of the bootstrap navbar. Do I need to get into the helper methods for placement maybe?

Thanks

David

Find more posts tagged with

Accepted answers

ChrisSmith7

If so, I was able to place it above the nav bar by adding a css override; here's the jsfiddle update:

Bootstrap nav bar; mobile popup ArcGIS - JSFiddle

And the overrides:

.esriMobileInfoView {z-index: 999999 !important;}
.esriMobilePopupInfoView {z-index: 999999 !important;}
.esriMobileNavigationBar {z-index: 999999 !important;}

Hope I understood your issue correctly!

All comments

dcoley

That's exactly it Chris, thanks! It was driving me nuts. My z-index was too low (108 - based on WAB) and I was missing the .esriMobilePopupInfoView class. I now have:

.esriMobileInfoView , .esriMobilePopupInfoView, .esriMobileNavigationBar {
    z-index: 999999 !important;
}

ChrisSmith7

If so, I was able to place it above the nav bar by adding a css override; here's the jsfiddle update:

Bootstrap nav bar; mobile popup ArcGIS - JSFiddle

And the overrides:

.esriMobileInfoView {z-index: 999999 !important;}
.esriMobilePopupInfoView {z-index: 999999 !important;}
.esriMobileNavigationBar {z-index: 999999 !important;}

Hope I understood your issue correctly!

ChrisSmith7

Not sure if I'm visualizing this correctly - is the problem exemplified in this jsfiddle I created?

Bootstrap nav bar; mobile popup ArcGIS - JSFiddle

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.