How to create Fixed Header without javascript?

Question

How to create Fixed Header without javascript?

Navigation

#1 by (5 votes)
#2 by (1 votes)

3

I want to create a header on a html page, responsive style that suits the mobile platform and the reduction of the page in the browser, how do I?

Note: Nothing I read on the internet at the time was of use, I want without javascript.

html5 css header site

asked by anonymous 26.04.2016 / 20:59

2 answers

Do not show "overflow" arrows Why is the size of a struct not the sum of the sizes of its variables?

score 5 · Answer 1

Can do with css yes!

The basics:

HTML:

<header>Menu</header>

CSS:

header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
}

Basic example with just a few customizations:

/* Header e Nav */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #342e37;
  color: #fafffd;
  height: 50px;
}
header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
header nav ul li {
  float: left;
}
header nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
header nav ul li a:hover {
  background-color: #111;
}
hr {
  margin-top: 80px;
}
p {
  text-align: justify;
}

<header>
  <nav>
    <ul>
      <li><a href="#index">Página inicial</a>
      </li>
      <li><a href="#sobre">Sobre</a>
      </li>
      <li><a href="#contato">Contato</a>
      </li>
    </ul>
  </nav>
</header>
<hr>
<h2 id="index">Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2>Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2 id="sobre">Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2>Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2>Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>
<h2 id="contato">Lorem ipsum</h2>
<p>
  Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem
  Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
  quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
</p>

You can create your menu in the header and use media query to adapt it according to the resolution.

Reference: link

score 1 · Answer 2

You can use the width and height property in css:

header{
  width: 100vw;
  height: 100vh;
}

But if you really want to have a website that is responsive to different screens, use media query (very easy):

/*-----------RESPONSIVE FOR THE IPHONE SCREEN-------------*/

@media only screen and (max-width:760px){

/*****************************************
         MUDAR PROPRIEDADES DE H1 NA TELA DE IPHONE
*****************************************/
    h1{ 
        font-size: 250%;
        word-spacing: 0px;
        letter-spacing: -2px;
        margin-bottom: 20px;
        width: 98%;
        margin-left: 1%;

    }
}