Move over responsive nav bar text - html

Question

Just starting out with some more css, using the examples on w3schools to make a responsive nav bar. I got part of it moved to where I want (the icon for when the screen is smaller) but I can't figure out how to move the actual nav bar text.
Not entirely sure what I should do, tried a couple things but with my limited knowledge things go all wonky. Im pretty sure I know where the edit would take place, if Im right it would take place in this part of the css
.navbar.responsive a {
float: right;
display: block;
text-align: left;
}
Heres the full css
#charset "UTF-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
float: right;
margin-top: 50px;
margin-right: 50px;
}
.navbar a {
display: block;
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #C58485;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.navbar a, .dropdown .dropbtn {
display: none;
}
.navbar a.icon {
float: right;
display: block;
position: absolute;
top:10px;
right: 45%;
}
}
#media screen and (max-width: 600px) {
.navbar.responsive {position: static;}
.navbar.responsive .icon {
float: right;
display: block;
top:10px;
right: 45%;
}
.navbar.responsive a {
float: right;
display: block;
text-align: left;
}
.navbar.responsive .dropdown {float: none;}
.navbar.responsive .dropdown-content {position: absolute;}
.navbar.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
Basically what its doing is when Im in a smaller window and the responsive page pops up, I want the text to be centered and in a line straight across when you click the 3 line dropdown.
Proof of concept: https://imgur.com/a/Ho5JENI
What it does right now: https://imgur.com/a/j2oWwlm

Answer 1

Here is a basic responsive navbar example hope this helps
EDIT
Explanation: inherently most elements in HTML are block level elements meaning that they stack on top of each other. An Anchor or "a" tag is an inline element meaning they will stay on the same line with other inline elements. In most cases you should start by framing out your page (just using HTML) this will allow you to see which elements stack on top of each other (block elements). If most of your elements stack that means they will easily fit on a small screen (mobile device). I can see you have a media query so I wont waste your time explaining that so... once you have the real estate (tablet or desktop) you then want to make some of your block elements inline, inline-block or float them depeding on how you want them to react with the other elements beside them. The easiest way (in this case) is to use flexbox which is great for laying out objects in 2D space. W3Schools: More information on flexbox here From there it is all visual and experience preference. Please let me know if you have any questions comments or concerns in the comments, I will be more than happy to help you. Good Luck and Keep Coding
nav {
display: flex;
flex-direction: column;
align-items: center;
}
ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
#media only screen and (min-width: 768px) {
ul {
display: flex;
}
li a {
padding: 1rem;
}
}
<nav>
<button>☰</button>
<ul>
<li><a href="#">home<a></li>
<li><a href="#">about<a></li>
<li><a href="#">portfolio<a></li>
<li><a href="#">prints<a></li>
<li><a href="#">contact<a></li>
<ul>
<nav>