Member Avatar for Casjen

I'm trying to build a website with Weebly. I am currently searching the web far and wide to try to figure out how to create a sticky navigation bar and insert it into the style sheet, but everything I try won't work. I have a website header with the logo, and then below that is a separate table with the navigation. It either stays in the place it is with a big space between it and the top, or it stays at the top but some of the header is hidden. Also, when one scrolls, it appears behind the text and content. Any fix for my problems? Help!

  • 3 Contributors
  • 4 Replies
  • 661 Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by Zill_1

Dani AI

Generated

Common causes for the symptoms described by — a nav that leaves a large gap, hides part of the header when fixed, or scrolls “behind” page text — are: the nav being removed from the document flow (position: fixed) without a spacer, a missing background or low z-index, ancestor stacking contexts (transform/filter/opacity creating a new stacking context), or the nav being inside a table-based layout or inside a relatively positioned header. was right to ask for the link (that makes diagnosis practical) and ’s pointer toward tutorials and alternative builders is useful background; the practical fixes below work inside a Weebly theme without rebuilding the site.

/* replace #siteNav and .main-wrapper with the theme's actual selectors */
#siteNav {
  position: fixed; /* or 'sticky' if preferred and supported */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* keep page content from jumping under the fixed nav */
.main-wrapper { padding-top: 60px; } /* set to nav height */

/* disable fixed nav on small screens to save vertical space */
@media (max-width: 720px) {
  #siteNav { position: static; box-shadow: none; }
  .main-wrapper { padding-top: 0; }
}

/* optional: prevent in-page anchors from hiding under the nav */
h2, h3 { scroll-margin-top: 70px; }

Key troubleshooting notes: ensure the nav gets a solid background so page text does not show through; add the exact top padding equal to the nav height (or insert a placeholder element the same height) so the layout does not jump. If the nav still appears behind content, inspect ancestors for transform, filter, opacity < 1, or a positioned parent with its own z-index — those properties create stacking contexts that break expected layering for fixed/sticky elements. If the nav currently lives inside a table or a header wrapper that must stay visible, move the nav into a top-level block container outside that wrapper, or remove the conflicting transform. In Weebly the CSS snippet belongs at the end of the theme stylesheet (Theme -> Edit HTML/CSS); selector names and pixel values should be adjusted to match the actual theme and tested in browser devtools.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

How can anyone help you if you have t provided any code or the link to the site?

Member Avatar for Casjen

Oh, ok! Here's the link. This site is the replacement for an old site, so it's still as a Weebly page. 3skatter-concept.weebly.com

Member Avatar for JorgeM

So I'm trying to figure out what the issue is on your site based on your description and nothing seems to be obvious.

Is the problem on or

Can you be more specific about the issue? show a picture or something... This is what I see from the link you provided... I see the header, logo and nav... no space that I can see.
3ef15cb03e8e082f185f44da2d25c2da

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.