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

HTML for 'sticky' or 'fixed' navbar buttons

veronicampbell

Hello,

My hub site has a header for multiple pages, and I am looking to create either "sticky" or "fixed" navbars to direct the user to subheaders within each page. I have code for buttons that can direct the user to the header, but would like these to be visible when the user scrolls throughout the page. I've tried tinkering with the following code I have for the buttons to try and do this, but no luck. Has anyone been able to do this? Thanks!

Current button code:

<a style="text-decoration:none;" href="#First Header" class="btn btn-default" role="button">First Header</a>

</div></div>

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

veronicampbell

Ah ok, thank you for this! The more I'm looking into it, I think the best route for the issue I'm encountering would be to use the 'sticky' function after all (as I would like the navbars to be placed right below an existing header bar). This would avoid the issue I'm running into and I wouldn't need to specify how to display for each screen size. Do you happen to know if this function is accepted in HTML code box?

KlaraSchmitt

I would recommend using media queries to target the different viewport sizes straight from within the style tags in your HTML code. The structure would be something like:

#navbar {
 /* general CSS rules here */
 @media (max-width: 560px) { 
   /* mobile breakpoint - add CSS overrides */
 }
 @media (max-width: 768px) {
   /* tablet breakpoint - add CSS overrides */
 }
}

You have two ways of writing media queries. I'm using max-width, which means I have the desktop viewport CSS set first and then overrides for mobile and tablet. You can also use min-width if you are starting from a mobile first general CSS bucket.

veronicampbell

I was able to create a fixed set of navbars, however I realized it doesn't look the same in different screen sizes (sits in one position on one screen, and another position on another sized screen). I'm not sure if I'm able to fix this with a viewport function within the HTML code, or if I can insert code into the 'Row CSS Class' text box. I can submit a different post if this question isn't right for the channel. Thanks again!

veronicampbell

Thanks, I do currently have a similar 'Go to Top' function, but I'm having trouble combing the button with the 'fixed' functionality. I'm thinking I'd like to have these subtopic navbars use the 'sticky' function instead - does this command work in a hub site? I've tried using some code for this but I'm not able to get this to work.

KlaraSchmitt

You could take a look at this site and try to duplicate their floating button: https://alohachallenge.hawaii.gov/

Únete a la Conversación

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

Enlaces Rápidos

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