timid zenith
Hello,
I want to create a navbar like this: https://i.imgur.com/6YWCaJb.png
I'm trying different things but the problem is I think at the level of css (the positioning is really not suitable because the locations are not all good)
Could someone please give me an idea of how to do it?
Image
I'm trying to do something responsive and standards-compliant so as not to simplify my learning process and really learn the right things straight away 
https://i.imgur.com/PXXJ9bg.png My result
sudden briar
Looks like you’re mostly there! Can you show the code?
timid zenith
Looks like you’re mostly there! Can you show the code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kurium Website</title>
<link rel="stylesheet" href="styles.css" />
<link rel="icon" href="assets/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="navbar">
<div class="navbar-logo">
<img src="mylogo.png" alt="Logo" />
</div>
<div class="navbar-elements">
<a href="#">Features</a>
<a href="#">Pricing</a>
<a href="#">FAQ</a>
</div>
<div class="navbar-buttons">
<button>Login</button>
<button>Register</button>
</div>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.navbar {
background-color: #333;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
.navbar-logo {
max-width: 100px;
}
.navbar-elements {
display: flex;
}
.navbar-elements a {
color: white;
text-decoration: none;
padding: 10px;
margin-right: 20px;
}
.navbar-buttons {
display: flex;
}
.navbar-buttons button {
padding: 10px;
margin-left: 10px;
cursor: pointer;
}
One thing is you’ll want to use <nav> element, but is it just that you’re wanting to add the “responsive” aspect? And by that are you wanting it to collapse into a button ?
timid zenith
One thing is you’ll want to use <nav> element, but is it just that you’re wantin...
I didn't understand your question
sudden briar
Sorry, I man what are you wanting to accomplish exactly?
timid zenith
I'd like to position the various elements successfully and make the whole thing responsive, as in my example here: https://i.imgur.com/PXXJ9bg.png
timid zenith
I've changed a few things in the UI but I still can't place the corrected elements.
timid zenith
@sudden briar
sudden briar
Ah sorry I meant to respond, I’m honestly not the best with css but I think one way to get the links on the right side would be to add margin-right:auto to your navbar-elements
But yeah in terms of spec using the nav element is important for accessibility
timid zenith
Ah yes,thank you, it worked, I hadn't thought of that, but the problem is that it doesn't render very well, so I'm thinking of keeping the elements in the center thanks
sudden briar
And In terms of responsiveness it should be pretty responsive by default
