How to adjust sections in html?

Question

I am designing a simple website using html/css/javascript/bootstrap. But i am having weird kind of problem. I want my menu and showcase first and after that i have another section called 'about' but about section is coming at first and menu is going down as show in pic

Here is my code

home.html

<section id="home">
  <div id="menu">
    <a id="toggle" (click)="openMenu()">
      <i *ngIf="showMenu" class="fa fa-bars menu-bar" aria-hidden="true"></i>
    </a>
    <a id="close-btn" (click)="closeMenu()">
      <i *ngIf="!showMenu" class="fa fa-times close-btn" aria-hidden="true"></i>
    </a>
    <ul class="menu-items bg-white rounded" #menuItems>
      <li>
        <a href="#introduction">Intro</a>
      </li>
      <li>
        <a href="#application">About</a>
      </li>
      <li>
        <a href="#context">Projects</a>
      </li>
      <li>
        <a href="#request">Contact</a>
      </li>
    </ul>
  </div>
  <div id="heading">
    <div id="logo-tagline" class="container">

      <p id="logo">A Webdeveloper</p>
      <p id="tagline">
        Hey! I`m Narayan &
        <br> this is my website,
        <br> feel free to have a
        <br> look around.
      </p>
    </div>
  </div>
</section>
<section id="about">
  <div class="about container">
    <h1 id="about-me">About</h1>
    <p>
      Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust
      foundation for web applications and APIs. By leveraging async functions, Koa allows you to ditch callbacks and greatly
      increase error- handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods
      that make writing servers fast and enjoyable.
    </p>
  </div>
</section>

style.scss

/* You can add global styles to this file, and also import other style files */

@import "~bootswatch/dist/lux/_variables.scss";
@import "~bootstrap/scss/bootstrap.scss";
@import "~bootswatch/dist/lux/_bootswatch.scss";
$primary-color: #F4F4F4;
$secondary-color: #FFFFFF;

body {
    background-color: $primary-color;
}

//navbar
#menu {
    position: fixed;
    top: 35px;
    right: 42px;
    z-index: 50;
}

#menu a#toggle {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid transparent;
    z-index: 5;
    font-size: 1.3rem;
    color: black;
    cursor: pointer;
}
#menu a#close-btn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid transparent;
    z-index: 5;
    font-size: 1.3rem;
    color: black;
    cursor: pointer;
}

#menu ul {
    display: none;
    position: absolute;
    top: 45px;
    right: 0;
    margin: 0;
    border: 1px solid #efefef;
    border-bottom: 1px solid #ddd;
    border-radius: 2px;
    padding: 35px;
    box-shadow: 0 1px 3px 0 #eee;
}
#menu ul li {
    list-style-type: none;
}
#menu ul li a {
    display: block;
    text-decoration: none;
    padding: 3px 0;
    color: inherit;
}
#menu ul li a:hover {
    text-decoration: underline;
    color: black;
}

/*sidenav 
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: $secondary-color;
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay-content {
    position: relative;
    top: 10%;
    width: 100%;
    text-align: left;
    margin-top: 30px;
}

.overlay a {
    padding-left: 10px;
    text-decoration: none;
    font-size: 26px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 35px;
    right: 40px;
    font-size: 1.3rem;
    color: black !important;
}

@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px
    }
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}
*/

//heading or showcase
#heading {
    position: absolute;
    top: 70%;
    margin-top: -150px;
    text-align: left;
    width: 100%;
}

#logo {
    font: 27px 'Italiana', sans-serif;
    text-transform: uppercase;
    letter-spacing: 14px;
    color: white;
    background-color: black;
    width: 60%;
    padding: 14px 10px 10px 10px;
}
#tagline {
    font-size: 22px;
}

//about section
#about {
    background-color: $secondary-color;
}

I think that's because the fixed positioning. check [this](https://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site) — Amr Aly, Sep 30 '18 at 14:18

score 0 · Answer 1 · answered Sep 30 '18 at 14:21

0

Your problem is you are using absolute positioning for everything which removes the element from the normal page flow. Learn to use relative positioning and then elements will generally fall in the order they appear in the code.

answered Sep 30 '18 at 14:21

croc

5
4

How to adjust sections in html?

1 Answers1