I have this sticky menu that is not working

JavaScript
1

http://codepen.io/pdxSherpa/pen/wBMvMo

Was hoping i could get some advice .
i am trying to get the blue bar to stay below the red even though they grey divs below can scroll up.
can’t recreate in my example but in my environment the top “red” navbar is already in a fixed position. though responsive.
Thank you
D

2

In your example $('nav.navbar').height() is 1000px, which is why nothing was happening.
Try changing that to $('navbarTop').height() or so.

3

nope that didn’t work.
D

4

This works on jsFiddle.

I just took your current Codepen and pasted it there. It has the same problems as the Codepen if you forget to include jQuery. So maybe CodePen needs jQuery added somewhere. I don’t use Codepen so I don’t know where that is.

###Edit
Yup. If you click the gear icon in the JS Pane on Codepen, you’ll see a library dropdown. Add jQuery.

5

Um, it does (although it should be #navbarTop

Edit: although I see mawburn’s example works, too, which is weird.

6

yes…weird. Ho well. thank you Pullo & Mawburn!
D

7

this might be more a css question but on the chance you just might know.
how can i center the list?
thx
D

8

The UL?

.topMenu
{
  display:table;
  margin:auto;
}

Throw that in.

1 Like
9

thank you, that does work but it kills he js. effect
well not quite. but it seems to disrupt the look of the full bar crossing the page

10

Oh. Ok well then just give .topMenu{text-align:center;}

Your list items are display:inline-block already so it’s perfect.

11

actually thank you for the suggestion, and paul’s menu as well. between the two i got it to work.
so much obliged.
D

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.