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; } } }

Fixed Header Disables HTML Edit Ability

LeviRoberts

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.

Encuentra más publicaciones etiquetadas con

Accepted answers

KlaraSchmitt

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

All comments

KyleWikstrom

Very helpful!

VanessaPocock

Yes thank you Klara - very helpful!

LeviRoberts

Thanks Klara,

This is will save me a ton or work!

KlaraSchmitt

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.

😎 Save.

VanessaPocock

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

KlaraSchmitt

Hi Levi,

-Klara

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Iniciar Sesión
Registrarse

Enlaces Rápidos

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