Ask coding questions

← Back to all posts
2 questions
WilliamXing (51)

2 questions. First, how do I make a top nav bar? I want the nav bar to stay there even when I scroll. Second, why is the tic tac toe and the pokemon battle unaligned?

Comments
hotnewtop
Bookie0 (6294)

@WilliamXing

Now how do I make it under my title?

take off margin:0px

make this for style of .title:

should look like this

Bookie0 (6294)

@WilliamXing Oh wait oops

That's not what you asked lol, try this:

For your h1 and your about title:

Then it should work. Let me know if you have questions :)

WilliamXing (51)

I don't see what changed @Bookie0

Bookie0 (6294)

@WilliamXing Hm can you invite me to the repl please?

Bookie0 (6294)

@WilliamXing
alright I fixed it is this how you like it?

WilliamXing (51)

Can you make the nav bar all the way on the top when they aren't looking at the top? @Bookie0

WilliamXing (51)

Like when they are looking at the very top, it shows that. But, when they are scrolling down and not looking at the top, it shows the nav bar with margin 0. @Bookie0

Bookie0 (6294)

@WilliamXing uhh how would we judge where they are looking at? You mean when they scroll down?

Bookie0 (6294)

@WilliamXing Okay I'm not very sure, but check this out:

this is the initial position of the header:

And when you scroll down it looks like this.

I'm sure you can find some way to change it to your needs :)

Good luck! :D

xxpertHacker (930)

https://developer.mozilla.org/en-US/docs/Web/CSS/position

https://www.w3schools.com/howto/howto_css_sticky_element.asp

For your navigation bar, I believe that you'd want position: sticky, not fixed.

Pretty sure that it exists for navbars like this :/

WilliamXing (51)

Now, I made a nav bar, but why does it say news? I changed it to projects

Bookie0 (6294)

Check out this w3 schools page which features plenty of example of how to make nav bars. You'll need position: fixed; to keep the navbar in place while scrolling down.

And you can look at this w3 schools page for position elements.

Good luck! :)

IntellectualGuy (825)

1. All you do is add position:fixed;

WilliamXing (51)

@IntellectualGuy @Coder100 @Bookie0 position: fixed worked, but how do I make it centered and all the way on the top?

Bookie0 (6294)

Hm am on phone right now, can you try width: 100%? Check this too which responds to your question i think @WilliamXing

Coder100 (18208)
  1. make ur nav position: fixed; ez
  2. first change your HTML
<div style="overflow: hidden">
      <article>
        <h3>
          <a href="https://replit.com/@WilliamXing/Pokemon-Battle#main.py" target="_blank">Pokemon Battle</a>
        </h3>
        <img src="Pokemon.jpg" height="200px" width="250px">
        <p>The world of pokemon is awesome. There are so many pokemon. In this game, you get to battle with other trainers(the computer), and win/lose. There is a shop in the end, where you can buy stuff</p>
      </article>
      
      <article>
        <h3>
          <a href="https://replit.com/@WilliamXing/Tic-Tac-Toe#main.py" target="_self">Tic Tac Toe</a>
        </h3>
        <img src="tic tac toe.jpeg" height="200px" width="250px" class="pokemonImg">
        <p>This game was made using tkinter. Tkinter is a python "graphics" module that allows you to make pictures and stuff. It's colors are nice.</p>
      </article>
</div>

second, add this to your article css:

float: left;

float left makes it well, align left automagically.
overflow hidden is used to make sure that the divs take up space too.

cjmatthy09 (52)

1. use bootstrap or make your own with float:top; and some other css tricks. search it up!
2. add float: left; in style.css to both of the <article>s via a class to make them on the same height!