CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 123

Page links won't show

I am fairly new to HTML/CSS and I am making a website.

I am trying to put a link at the top of the page, but it isn't showing. According to the browsers developer tools it's there but behind the title. I have given it the highest z-index out of all the others. (I know there is a lot to go through but I have no idea what could be causing the problem.)

Here is my HTML code:

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #444;
}

header {
  position: fixed;
  right: 0;
  z-index: 99;
  background-color: #EC7063;
  height: 135px;
  width: 100%;
  opacity: .9;
  margin-bottom: 0px;
}

header h1.logo {
  box-sizing: content-box;
  height: 100%;
  margin: 0;
  font-size: 5vw;
  color: #fff;
  text-transform: uppercase;
  float: left;
  line-height: 200px;
}

header h1.logo:hover {
  color: #fff;
  text-decoration: none;
}

div.home {
  margin-top: -50px;
  box-sizing: border-box;
  position: relative;
  opacity: .8;
}

div.about {
  background-color: #F5B7B1;
}

h2 {
  font-size: 3em;
  margin-top: 40px;
  text-align: center;
  letter-spacing: -2px;
}

h3 {
  font-size: 1.7em;
  font-weight: 100;
  margin-top: 30px;
  text-align: center;
  letter-spacing: -1px;
  color: #999;
}

.menu {
  position: static;
  z-index: 1000;
  float: right;
  margin-top: 18px;
  margin-right: 18px;
  line-height: 0px;
}

.menu li {
  position: static;
  display: block;
}

.menu li+li {
  position: static;
  margin-left: 35px;
}

.menu li a {
  position: static;
  color: #444;
  text-decoration: none;
}

img.home_img {
  box-sizing: content-box;
  position: relative;
  width: 100%;
  height: auto;
}

img {
  margin: -5px;
}

.container {
  display: ;
}
<!DOCTYPE html>
<html>

<head>
  <title>My Sugar</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>

<body>
  <header>
    <h1 class="logo">Sugar me</h1>
    <strong><nav>
              <ul class="menu">
                <li><a href="{{ url_for('home') }}">Home</a></li>
                <li><a href="{{ url_for('about') }}">About</a></li>
              </ul>
            </nav></strong>
  </header>
  {% block content %} {% endblock %}
</body>

</html>

Upvotes: 0

Views: 113

Answers (2)

Fanka Bacheva
Fanka Bacheva

Reputation: 50

Remove z-index property and check the result here - https://jsfiddle.net/frvasileva/gev0Let5/

.container {
  display: block;
  position:relative;
 /* z-index:1000;*/
  margin-top:135px;
}

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 58592

I have recreated the page in JSFiddle,

https://jsfiddle.net/Kai_Draord/gme434hp/2/

Changes: 1. to display the list items horizontally I used css "display:inline;" please check the references for the details.

  1. I understand that you want to fix the header to the top, so I have added "top:0px" to fix the header to the top.

  2. I wrapped the contents of the website

    {% block content %} {% endblock %}

in a container class to show it below the header I added the css "margin-top:135px;" and some other styling so that it will look better and not be hidden behind the header.

please find below the css for the container class.

.container {
  display: block;
  position:relative;
  z-index:1000;
  margin-top:135px;
}

Whenever you make your website, in the browser press F12 and play around with the CSS properties, this will help you get the desired result faster. Thanks.

Reference: menu items

Upvotes: 1

Related Questions