CODEWITHSUNDEEP
htmlcss
Senoj
Senoj

Reputation: 51

Navbar Not Responding

I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.

JSFiddle - With Information

JSFIDDLE - Without Information

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="homepage.css">
  <title>CSGOMarble</title>
</head>
<body>  
<h3 style="float: right; margin-right: 25px;"><a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a></h3>

<div class="logo">
  <img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>

<hr>

<div class="navbar">
    <ul>
      <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
      <li><a href="coinflip.html">COINFLIP</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
</div>
<div class="container">
  <h2>CSGOMarble</h2>
  <u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
  <p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>

CSS:

body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
  width: 100%;
  margin-top: 20px;
  font-size: 25px;
  display: inline-block;
  position: fixed;
  text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 175px;
    background-color: #f1f1f1;
    border: 2px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 12px 0 12px 0;
    text-decoration: none;
}
li a:hover {
    background-color: #555;
    color: white;
}
li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

Upvotes: 0

Views: 44

Answers (2)

hemanjosko
hemanjosko

Reputation: 315

When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want. 

.navbar {
    margin-top: 50px;
    margin-left: 25px;
    padding: 0;
    font-size: 15px;
    float: left;
    display: inline-block;
    z-index: 2;
    position: fixed;
}

.container {
    width: 100%;
    margin-top: 20px;
    font-size: 25px;
    display: inline-block;
    position: fixed;
    text-align: center;
    z-index: 1;
}

Change this Css Hope it helps

Upvotes: 1

cssyphus
cssyphus

Reputation: 40038

Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.

The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).

Change position:fixed to position:relative for the <div class="container">

Upvotes: 1

Related Questions