Finding ways to achieve this navigation bar

[anon10002461]

Hi, today I was trying to achieve this navigation bar:

It took me a while though. I know there might be several ways to achieve this, so I’d like anyone else to write they own approach.

I’m sharing my way below:

ul {
background-color:red;
display:flex;
list-style-type:none;
justify-content:flex-end;
}
ul > li {
padding:1rem;
}
ul > li:hover{
    background-color:rgba(0,120, 20, 0.7);
}
ul>li:first-child{
margin-right:auto;
}

The issue was I wasn’t aware of how flexbox redefines margins, and now I know that trick of margin:auto works here rather well.

[biscuitmanz]

@anon10002461 thats pretty cool iv never used margin-right: auto; before il have to try that out sometime, i use flexbox a lot myself too, probably to much tbh lol this is how i do it anyway…

body {
  margin: 0;
}

nav {
  background-color:#900C3F;
  display:flex;
  justify-content: space-between;
  padding: 0 50px;
}

 .title, nav a {
  margin:0;
  padding:1rem;
  color: #fff;
  text-decoration: none;
}

.links {
  display:flex;
}

and html

	<nav>
		<p class="title">Title</p>
		<div class="links">
			<a href="#">Link 1</a>
			<a href="#">Link 2</a>
		</div>
	</nav>

[sobadrdb]

hi @anon10002461

i’m not using the ul and li also, just like @biscuitmanz for nav link.

here is my code :
HTML

<nav>
    <a href="#">First</a>
    <a href="#">Second</a>
    <a href="#">Third</a>
  </nav> 

and the CSS

nav {
  display: flex;
}

nav a {
  text-decoration: none;
  padding: .5em 1em;
}

nav a:first-child {
  margin-right: auto;
}

and the result :

regards

[anon10002461]

@sobadrdb @biscuitmanz

very interesting to see you approaches.
Thank you guys!