Fixed Header Disables HTML Edit Ability

1047
6
Jump to solution
04-27-2017 09:31 AM
LeviRoberts
New Contributor III

Hi, I was playing around with customizing my Open Data Portal's header and when I set the nav class equal to "navbar-fixed-top" instead of "navbar-static-top", it worked how I wanted but I was no longer able to edit the HTML. The gear icon just disappeared. I've had to recreate my page because of this. Is there something I'm missing? It's functionality I'd really like to have but seems like I can't currently.

Tags (2)
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

Hi Levi,

Yes, at the moment, we do not supported the 'navbar-fixed-top' because when it is used in conjunction with a custom header, we've run into issues between knowing the height of the custom header, which is required to set the optional footer, and if set to a height too large, the fixed header will cover the entire 'search bar | My Data' navigation we have on the internal pages of the application.

The reason you lose the gear when you set that class is because fixed classes will position themselves on top of everything else. So in reality, the gear is still there, it's just that now you've told the CSS that you want that search bar to always be on top of everything and that's going to be true whether you are in the Layout Editor or the live site.

-Klara

View solution in original post

6 Replies
KlaraSchmitt
Esri Contributor

Hi Levi,

Yes, at the moment, we do not supported the 'navbar-fixed-top' because when it is used in conjunction with a custom header, we've run into issues between knowing the height of the custom header, which is required to set the optional footer, and if set to a height too large, the fixed header will cover the entire 'search bar | My Data' navigation we have on the internal pages of the application.

The reason you lose the gear when you set that class is because fixed classes will position themselves on top of everything else. So in reality, the gear is still there, it's just that now you've told the CSS that you want that search bar to always be on top of everything and that's going to be true whether you are in the Layout Editor or the live site.

-Klara

View solution in original post

VanessaPocock
New Contributor II

Klara - do you know is there any way to fix this issue without rebuilding the site?

I'm having the exact same problem with my site.

Vanessa

0 Kudos
KlaraSchmitt
Esri Contributor

Hi Vanessa,

Yes. There is a way to undo this without recreating the site by temporarily modifying the HTML code from Chrome's Dev Tools.

1) Open the Layout Editor while in Chrome.

2) Right click the navigation bar.

3) Select Inspect from dropdown menu.

dropdown menu when right clicking an element on page

4) In the Chrome Dev Tools panel, look for navbar-fixed-top and double-click on the name.

chrome dev tools showing code for navbar

5) When navbar-fixed-top becomes an input, delete navbar-fixed-top and type navbar-default

change navbar-fixed-top to navbar-default in dev tools

6) Press enter. This will make the gear show back up in the Layout Builder preview.

7) Click the navbar gear, change your header code to remove navbar-fixed-top and add navbar-default back.

8) Save.

LeviRoberts
New Contributor III

Thanks Klara,

This is will save me a ton or work!

0 Kudos
VanessaPocock
New Contributor II

Yes thank you Klara - very helpful!

0 Kudos
KyleWikstrom
Occasional Contributor II

Very helpful!

0 Kudos