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:

<div id="navbar">

<div class="text-center">

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

</div></div>

[KlaraSchmitt]

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

[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.

[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!

[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]

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]

You should be able to use #navbar {position:fixed; top: 25px;} within your <style></style> to achieve a sticky effect. While there is a Boostrap class that does this, I would be wary of using it as people who've tried it in our application have found it often ends up affecting their ability to edit anything inside the layout editor because we also use the same class to position our edit navbar and there's a bit of conflict between the two.

The top property is adjustable. I simply chose that number because it leaves space for the global navbar (22px) if you have that enabled.

[Veronicampbell]

Thank you for your support on this. The 'Header' and 'Footer' pages under 'Customize' have separate boxes to submit HTML and CSS, however when editing the text boxes within each hub site page, I only see boxes to enter HTML. Am I missing where to write CSS for these?

[KlaraSchmitt]

If you're doing this in the Header CSS box then you don't need the <style></style> tags I reference above. If you're doing this in a Text Card on the site or page that displays below the header then you can put <style></style> tags in the HTML box, which signals to the browser that you're using embedded CSS. You'd then put your CSS rules between those style tags.