(Sticky) Nav on the Bottom of the First Screen/Hero Section

General Discussion
1

Hi!
I’ve been experimenting, trying to make a sticky navigation, that initially is placed at the bottom of the first page, just below (or on top of the bottom part of) the Hero section.

When using Padding: Full screen for the hero bloc, I haven’t been able to modify that to leave room for the navigation at the bottom (as it is, I have to scroll down to see it).
Maybe that’s not the best approach? :sweat_smile:
I tried adding different stuff, added my own class fill-screen-modified to the bloc, and (in the Code Editor) then CSS:

#bloc-0 .bloc .bloc-fill-screen .fill-screen-modified {
  max-height:92vh !important;
  height:92vh !important;
}

Thought being to shrink the full screen hero to almost full screen, so the Nav bloc would be at the bottom. Not sure why modifying the fullscreen class doesn’t work. Might be wrong approach, though … :nerd_face:

Edit: … Trying a bit more, I opted for removing the padding, selecting padding none instead of full, then adding my own class, and then:

  • Make the bloc of display type Flex, and center content of the Flex

Seems to work better now.

image
image1920×1437 141 KB

image
image1608×1446 138 KB
image
image1614×838 114 KB

… Now onto figuring out how to make the menu sticky-top globally/for most pages, then like this for the front page/other pages with a hero section. :grin:

1 Like
2

Seems like it works well to just put a display:none; in the Page Settings for the pages with a hero section/different nav:

<style>.global-nav {display:none;}</style>

I hope this is OK, not a bad way of doing this(?). :sweat_smile:

(Updating and commenting my own topic, in case it’s helpful for others later. And not like the infamous comments on StackOverflow etc. just saying: “Never mind, figured it out.” for the very question you’re trying to figure out.) :nerd_face: