Select to view content in your preferred language

How to hide navigation dot panel and back button on story action widget full screen?

1045
1
Jump to solution
04-06-2018 06:07 AM
CandaceRoberts1
New Contributor

I'm using Story Map Journal with a story action to a web map app. The app has the full screen widget that, when employed, has the navigation dot panel overlays the full screen web map. This is a problem as it's covering functionality of the web map app. Can the navigation dot panel be hidden? If so, where do I modify the code?

Also, when web map app is employed, Story Map Journal displays a Back Button which works just fine until...full screen is employed. The Back Button remains displayed but only the <esc> key will return from full screen. Any way to hide Back Button so not to confuse the user on what key to press??

0 Kudos
1 Solution

Accepted Solutions
CandaceRoberts1
New Contributor

Found a solution by changing the opacity of the navigation dot panel! The problem is going full screen on a web map app, the buttons/widgets on the web map app were hidden behind the navigation panel (it's called vertical). Making that panel more transparent, the buttons/widgets are visible to the user and totally functional.

In Story Map Journal editor:
- edit the home pane of the side panel

- click on the source button

- at the very beginning, type in:

<style type="text/css">.vertical {opacity: 0.5;} </style>

- save and you're done!

Opacity range is 1.0 to 0.0, default is 1.0 (not see-thru).

View solution in original post

0 Kudos
1 Reply
CandaceRoberts1
New Contributor

Found a solution by changing the opacity of the navigation dot panel! The problem is going full screen on a web map app, the buttons/widgets on the web map app were hidden behind the navigation panel (it's called vertical). Making that panel more transparent, the buttons/widgets are visible to the user and totally functional.

In Story Map Journal editor:
- edit the home pane of the side panel

- click on the source button

- at the very beginning, type in:

<style type="text/css">.vertical {opacity: 0.5;} </style>

- save and you're done!

Opacity range is 1.0 to 0.0, default is 1.0 (not see-thru).

0 Kudos