0
You can see the code in the codepen. I cannot let, when the page is in its normal size, the menu with the inline-block options, even if it is in the code. He keeps behaving just like a block, one on top of the other. You should only do this when the page reaches 700px, and the list goes down the page, leaving a "menu" link above.
https://codepen.io/ysalemos/pen/MWwzXxZ?editors=1100
Link code
html{
background-color: #CACFD2;
}
body {
margin-left: 10%;
margin-right: 10%;
margin-bottom: 1%;
margin-top: 1%;
background-color: #424949;
padding: 30px;
}
p{
padding-bottom: 10px;
text-align: justify;
font-size: 13px;
font-family: 'Noto Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
color:#CACFD2;
line-height: 1.5;
}
h1{
text-align: center;
color:#EAEDED;
font-size: 20px;
padding-bottom: 20px;
padding-top: 20px;
text-transform: uppercase;
font-weight: bold;
font-family: 'Noto Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
}
ul{
padding: 0;
list-style: none;
margin:0;
}
.navegacao a{
display: inline-block;
padding: 1px;
text-decoration: none;
color:#EAEDED;
border-bottom: 1px solid #EAEDED;
font-family: 'Noto Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
}
.iniciador{
padding: 5px;
border-bottom: 1px solid #EAEDED;
text-decoration: none;
color:#EAEDED;
text-transform: uppercase;
font-weight: bold;
font-family: 'Noto Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
}
@media screen and (min-width:700px){
.iniciador{
display:none;
}
.navegacao{
position:absolute;
top:-30px;
}
.navegacao li{
display:block;
}
}<html>
<head>
<title> Importância de Star Wars para o cinema </title>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans|Open+Sans:300,400&display=swap" rel="stylesheet">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
</head>
<body>
<a href="#menu" class="iniciador" id="link-menu">Menu</a>
<h1> Importância de Star Wars para o cinema </h1>
<p> Inicialmente, o Episódio IV: Uma Nova Esperança seria o único filme sobre Star Wars feito por George Lucas. A produção conta a história da princesa Leia Organa, que é presa por fazer parte da resistência e também por roubar os planos do projeto secreto imperial, a Estrela da Morte. Mas antes que Darth Vader consiga pegar os planos, Leia os coloca no droide R2-D2 e, ao lado de C3-PO, ele vai atrás de Obi-Wan Kenobi. É nesse momento que conhecemos Luke Skywalker, um jovem que sempre quis sair de Tatooine e conhecer o universo, mas foi impedido pelos tios, que temiam que o garoto se tornasse como o seu pai, Anakin Skywalker. Mais tarde, em outros filmes da franquia, Luke é treinado pelo mestre Yoda e se torna um grande Jedi. </p>
<p> Com um roteiro futurista, Star Wars caiu nas graças no público não somente pela história, mas por apresentar um universo surreal e transformá-lo em algo verossímil aos nossos olhos. Além disso, personagens humanos se misturam com outras criaturas de maneira convincente, como é o caso de Han Solo e o seu companheiro, Chewbacca. Há também a presença de muitos personagens com perfil carismático, como é o caso de Luke, o herói do filme, Leia, Han Solo, Chewbacca e também os droides. Até mesmo Darth Vader, um vilão icônico para o mundo do cinema, consegue transparecer certo carisma. Ele é um vilão que, na verdade, pode ser considerado nosso herói. </p>
<p> Por esses e outros motivos, Star Wars se tornou um fenômeno e ajudou a fundar o cinema moderno, elevando o conceito de ‘blockbuster’, que começou com o filme Tubarão (1975), de Steven Spielberg. Sucesso de críticas, George Lucas lançou, no total, seis filmes, divididos em duas trilogias: a que conta a jornada de Luke Skywalker e a dedicada à história da transformação de Anakin Skywalker em Darth Vader. E como o universo de Star Wars é gigantesco e repleto de possibilidades, em 2015 estreou O Despertar da Força, o sétimo episódio de Star Wars, também aclamado pela crítica, alcançando 92% no Rotten Tomatoes (apenas 1% a menos que Uma Nova Esperança). </p>
<p> Além de ter praticamente inaugurado a era dos ‘blockbusters’, Star Wars também foi um dos primeiros filmes a lançar produtos licenciados relacionados ao universo, como diversos livros e quadrinhos, artigos de colecionador, brinquedos, etc. E não só isso: a frase ‘que a Força esteja com você’ foi eleita a 8º frase mais memorável pelo AFI (American Film Institute) e Darth Vader o 3º maior vilão do cinema americano. FONTE: http://cinematecando.com.br/ </p>
<div id="menu" class="navegacao">
<ul>
<li> <a href="#">Inicio</a></li>
<li> <a href="#">Vader</a></li>
<li> <a href="#">Leia Organa</a></li>
<li> <a href="#">Han Solo</a></li>
<li> <a href="#">Luke Skywalker</a></li>
</ul>
</div>
</body>
</html>
hello, put the code here in your question, click edit and icon
<>can add the full code, not everyone access the other sites, besides getting better to see and understand– Ricardo Pontual