0

I've been doing a school project, and I just ran into an issue. I got two different things from W3 - the sticky navigation bar, and the ability to have different tabs on a single page, such that all of the info can be presented in a less cluttered way. Problem is, when I try to incorporate the two at once, the tabs couldn't be moved from the very top unless I decided to insert a margin above them, which also moved the navigation bar. I think the problem is the fact that the navigation bar is sticky, so I can't move it, but I don't know why the tabs can't be any lower than the navigation bar.

Stack Overflow is yelling at me because it says I need code to insert a jsfiddle link, so here's my 'code.'

The fiddle can be accessed here.

(Also, if anyone can figure out why the function that causes the text to appear isn't working, I'd appreciate that as well.)

Thank you!

Reilly Ford
  • 21
  • 8

1 Answers1

0

You need to add top: 0px; on the fixed ul and then you'll be able to add top margin to the .tab element without the navigation bar following. Also, your panels aren't showing because you aren't passing through the panel ID's.

Change this:

<button class="tablinks" onclick="openTab(event, 'Caesar')">Caesar</button>
<button class="tablinks" onclick="openTab(event, 'Vigenere')">Vigenere</button>

to this:

<button class="tablinks" onclick="openTab(event, 'caesartab')">Caesar</button>
<button class="tablinks" onclick="openTab(event, 'vigeneretab')">Vigenere</button>

It's not best practice to use inline JavaScript handlers (onclick) so try to avoid them if at all possible. See this post as to why.

BSK
  • 733
  • 2
  • 7
  • 13