How do I make navbar buttons vertical responsively?

matiasnegro · December 9, 2021

Hello. I'm learning CSS and I'm trying to make the navbar vertical when the display changes, as is explained here: https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_blog but even though I replicate the same code in my page it doesn't work. Somebody knows why?

<!DOCTYPE html>
<html>
<head>
<title>Estructura HTML Prototípica</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="description" content="Descripción del contenido de la página">
<meta name="author" content="Nombre del dueño de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<style>
body
{background-color:black;}

.header
{background-color: black;
padding: 20px;
text-align: center;
color: white;}

.topnav
{overflow: hidden;
background-color: #333;
width: 100%;
border-radius: 25px;}

.topnav a
{float:left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
display:block;
text-decoration: none;
background-color: purple;}

.topnav a:hover
{background-color: #ddd;
color: black;} 

.column
{float: left;
padding: 1%;
margin: 1%;
color: white;
border-radius: 25px;}

.column.side
{width: 19%;
background-color: orange;}

.column.middle
{width: 50%;
background-color: blue;}

.footer
{background-color: tomato;
text-align: center;
color: white;
display: block;
clear: both;
position: relative;
bottom: 0;
width: 100%;}

@media and screen (max-width:400px)
{.topnav a
{float: none;
width:100%;}}

</style>

<body>
<div class="header">
<h1>Modelaje</h1>
</div>  
    
<div class="topnav">
<a href="#">Home</a>
<a href="#">Portfolio Completo</a>
<a href="#">Contacto</a>
<a href="#" style="float:right"">Login</a>
</div>

<div>
<div class="column side">
<h2>Side 1</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>

<div class="column middle">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
</p>
</div>

<div class="column side">
<h2>Side 2</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>
</div>

<div class="footer">
<p>Todos los derechos reservados. 2022</p>
</div>

</body>
</html>

Ingolme · December 9, 2021

The media query needs to be fixed. You have "screen" and "and" mixed up.

Here is how it should be written:

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

matiasnegro · December 9, 2021

Okay, I fixed it but he result is the same: the buttons look oddly decentered

matiasnegro · December 9, 2021

I mean, it doesn't look like this

matiasnegro · December 9, 2021

<!DOCTYPE html>
<html>
<head>
<title>Estructura HTML Prototípica</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="description" content="Descripción del contenido de la página">
<meta name="author" content="Nombre del dueño de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<style>
body
{background-color:black;}

.header
{background-color: black;
padding: 20px;
text-align: center;
color: white;}

.topnav
{overflow: hidden;
background-color: #333;
width: 100%;
border-radius: 25px;}

.topnav a
{float:left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
display:block;
text-decoration: none;
background-color: purple;}

.topnav a:hover
{background-color: #ddd;
color: black;} 

.column
{float: left;
padding: 1%;
margin: 1%;
color: white;
border-radius: 25px;}

.column.side
{width: 19%;
background-color: orange;}

.column.middle
{width: 50%;
background-color: blue;}

.footer
{background-color: tomato;
text-align: center;
color: white;
display: block;
clear: both;
position: relative;
bottom: 0;
width: 100%;}

@media screen and (max-width:400px)
{.topnav a
{float: none;
width:100%;
text-align: center;}}

</style>

<body>
<div class="header">
<h1>Modelaje</h1>
</div>  
    
<div class="topnav">
<a href="#">Home</a>
<a href="#">Portfolio Completo</a>
<a href="#">Contacto</a>
<a href="#" style="float:right"">Login</a>
</div>

<div>
<div class="column side">
<h2>Side 1</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>

<div class="column middle">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
</p>
</div>

<div class="column side">
<h2>Side 2</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>
</div>

<div class="footer">
<p>Todos los derechos reservados. 2022</p>
</div>

</body>
</html>

Ingolme · December 9, 2021

That's because the links are wider than the container. You have set the width to 100%, then added 16px if padding to the left and another 16px of padding to the right. The result is that the link is exceeding the width of the container by 32 pixels.

This can be fixed by removing width:100%; from the stylesheet. It's not needed because block elements automatically grow to fit their container.

The last link in the list is going to have a problem because you have set its value to float:right in the HTML in a style attribute, so the media query can't override it. You have to move that CSS rule out of the HTML and into the stylesheet.

matiasnegro · December 9, 2021

Ok. I moved the float property of Login into the stylesheet by using an "id". I also removed the width from the navbar. Kept the padding, though because otherwise it looks awful. But the result is the same, when I reduce the size of the window the buttons still look decentered.

<!DOCTYPE html>
<html>
<head>
<title>Estructura HTML Prototípica</title>
<meta charset="UTF-8">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="description" content="Descripción del contenido de la página">
<meta name="author" content="Nombre del dueño de la página">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

<style>
body
{background-color:black;}

.header
{background-color: black;
padding: 20px;
text-align: center;
color: white;}

.topnav
{overflow: hidden;
background-color: #333;
border-radius: 25px;}

.topnav a
{float:left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
display:block;
text-decoration: none;
background-color: purple;}

.topnav a:hover
{background-color: #ddd;
color: black;} 

.column
{float: left;
padding: 1%;
margin: 1%;
color: white;
border-radius: 25px;}

.column.side
{width: 19%;
background-color: orange;}

.column.middle
{width: 50%;
background-color: blue;}

.footer
{background-color: tomato;
text-align: center;
color: white;
display: block;
clear: both;
position: relative;
bottom: 0;
width: 100%;}

#login 
{float:right;}

@media screen and (max-width:400px)
{.topnav a
{float: none;
width:100%;
text-align: center;}}

</style>

<body>
<div class="header">
<h1>Modelaje</h1>
</div>  
    
<div class="topnav">
<a href="#">Home</a>
<a href="#">Portfolio Completo</a>
<a href="#">Contacto</a>
<a href="#" id="login">Login</a>
</div>
<div>
<div class="column side">
<h2>Side 1</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>

<div class="column middle">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
</p>
</div>

<div class="column side">
<h2>Side 2</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Maecenas sit amet pretium urna.
Vivamus venenatis velit nec
neque ultricies, eget elementum 
agna tristique. Quisque vehicu
la, risus eget aliquam place
rat, purus leo tincidunt er
os, eget luctus quam orci 
in velit. Praesent sceleris
que tortor sed accumsan c
onvallis.</p>
</div>
</div>

<div class="footer">
<p>Todos los derechos reservados. 2022</p>
</div>

</body>
</html>

Ingolme · December 9, 2021

Not the navbar. The links. This width property has to be removed:

@media screen and (max-width:400px) {
.topnav a {
float: none;
width:100%;
text-align: center;}}

matiasnegro · December 10, 2021

Oh, sorry, I didn't get you at first.

It works now, thanks so much!

Sign In

How do I make navbar buttons vertical responsively?

Recommended Posts

matiasnegro

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

matiasnegro

Link to comment

Share on other sites

matiasnegro

Link to comment

Share on other sites

matiasnegro

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

matiasnegro

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

matiasnegro

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity