Hey I need some kind person to help me with my navigation bar (very basic).
What I want to do:
- Center my logo and list items vertically
- Have my logo on the left side
- Have my list items on the right side
- Use Flexboxes
No matter what I do I can’t get this to work. I can get them centered vertically on one side but not separate them.
I tried to do it with float but it doesn’t work when I have display:flex I believe…
Here is what my HTML code looks like:
<nav class="navigation">
<img class="logo" src="...">
<ul>
<li class="move-list"><a href="#">Link1</a></li>
<li class="move-list"><a href="#">Link2</a></li>
<li class="move-list"><a href="#">Link3</a></li>
</ul>
</nav>
Here is what my CSS code looks like:
.navigation {
width: 100%;
height: 100px;
background-color: orange;
position:fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.logo {
height: 70px;
padding-left: 20px;
}
.navigation li {
display: inline;
}
.navigation ul {
}
I have the ‘.navigation ul’ there because I think I maybe should use it? but I don’t know.
Anyways I would appreciate it a lot if someone could help me out with this! <3
Thanks in advance
/Hugo