Positioning Navbars

Question

I have a question about positioning navbars. For some reason whenever I go on the webpage, the navbar isn't fixed to the top of the page. Here's an example: https://gyazo.com/a856b5dcaadc3b8729f054ddb7387417

The navbar has small sections from the top of the browser and sides, is there a way to stretch/expand it so it fits like the Stack Overflow navbar?

For example.

HTML:

<html lang="en">  
  <head>  
    <title>CSGOCarry.com | Win Big!</title>
    <link rel="stylesheet" type="text/css" href="csgositecss.css">  
  </head>

  <body>  
    <div class="container">
      <div class="center">
        <h1>Welcome to CSGOCarry</h1>
        <h3>Where Dreams Come True</h3>
      </div>
    </div>
    <div class="navbar">
      <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="Jackpot.asp">Jackpot</a></li>
        <li><a href="Coinflip.asp">Coinflip</a></li>
        <li><a href="roulette.asp">Roulette</a></li>
      </ul>    
  </body>
</html>

CSS:

body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
}

h1 {
  color:white; 
  text-align:center; 
  font-size:58px;
}
h3 {
    text-align:center;
    color:white;
    font-size: 28px;
    margin-top: -40px;
}
.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
}

li {
     float: left;
}

li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
      background-color: #111;
}

It's hard to say without seeing the code. Can you link to the site or share a jsFiddle? — symlink, Feb 28 '16 at 04:40

score 0 · Accepted Answer · answered Feb 28 '16 at 04:48

try

.navbar{
 margin: -10px;

}

make sure to end the <div class="navbar">

and i can see the image colliding with the navbar, so if you want add position: relative; to avoid that.

.navbar{
  position: relative;
  margin: -10px;
}

Here's the JSFiddle: https://jsfiddle.net/vtrvjwee/

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

It is the default margin of body. You need to reset in you css.

body {
 background-image: url("csgocarryback.jpg");
 background-size: 100%;
   margin: 0;
}

Also it is not exactly 10px. Check the below question -

HTML default body margin

edited May 23 '17 at 11:50

Community

1
1

answered Feb 28 '16 at 05:33

Felix A J

6,300
2
27
46

Positioning Navbars

2 Answers2