Need logo on the left and links on the right

Question

Currently I'm making navbar for my website, but have this issue: I need logo to be on the left and links on the right. I tried to find some solutions for this, but didn't find any. I'm using nav element and float didn't worked.

Here is my code:

* {margin: 0;}

nav {
    overflow: hidden;
    display: flex;
    padding: 20px 15px;
    color: #344E41;
    align-items: center;
    justify-content: right;
    background: aqua;
}

nav a {
    color: #344E41;
    text-decoration: none;
    margin: 0px 20px;
    transition: 0.5s;
}

nav a:hover {
    opacity: 75%;
}

<nav>
  <img src="https://i.stack.imgur.com/oqbjv.png" height="50px">
  <a id="nav_a" href="#link1">link1</a>
  <a id="nav_a" href="#link2">link2</a>
</nav>

score 2 · Accepted Answer · answered Jul 03 '22 at 16:09

You can simply add margin-right: auto to the img, and it would do the job, like so:

* {margin: 0;}

nav {
    overflow: hidden;
    display: flex;
    padding: 20px 15px;
    color: #344E41;
    align-items: center;
    background: aqua;
    gap:20px;
}

nav a {
    color: #344E41;
    text-decoration: none;
    transition: 0.5s;
}
nav img{
 margin-right:auto;
}
nav a:hover {
    opacity: 75%;
}

<nav>
  <img src="https://i.stack.imgur.com/oqbjv.png" height="50px">
  <a id="nav_a" href="#link1">link1</a>
  <a id="nav_a" href="#link2">link2</a>
</nav>

Ali Azarpeykan · Answer 2 · 2022-07-03T17:55:51.217

You can put logo in a <div> and the links in another <div> and then use text-align:left; and width:1300px; to image div so the logo will go to the left.

* {margin: 0;}

nav {
    overflow: hidden;
    display: flex;
    padding: 20px 15px;
    color: #344E41;
    align-items: center;
    justify-content: right;
    background: aqua;
}

nav a {
    color: #344E41;
    text-decoration: none;
    margin: 0px 20px;
    transition: 0.5s;
}

nav a:hover {
    opacity: 75%;
}

#img {
    text-align: left;
    width: 1300px;
}
.img {
    text-align: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>
  <nav>
    <div id="img">
    <img class="img" src="https://i.stack.imgur.com/oqbjv.png" height="50px">
    </div>
    <div>
      <a id="nav_a" href="#link1">link1</a>
    <a id="nav_a" href="#link2">link2</a>
    </div>
    
</nav>

</body>
</html>

Code-only answers are considered low quality. Without sufficient explanation, your answer is hard to understand. If the OP can't understand your answer, then he also won't be able to reproduce your possible solution. As such it would be worthless to him/her. Please add a sufficient explanation of your possible solution. — tacoshy, Jul 03 '22 at 17:12
@tacoshy Well it is their own code and they obviously know what is changed in their code and what is added but you are right, its better to add explanation and I will add so if you can fix that downvote ty. — Ali Azarpeykan, Jul 03 '22 at 17:51

score -1 · Answer 3 · answered Jul 03 '22 at 16:03

-1

Since you are using flexbox, you can set the direction of the elements. Adding to your nav CSS the property:

flex-direction: row;

This should display the elements horizontally to the right.

answered Jul 03 '22 at 16:03

Asimov-JS

16
3

When i done that, nothing changed. – Otryks Jul 03 '22 at 16:07
it will not align the links to the right by default you miss at least one steps to a full solution. Besides that, `flex-direction: row` is the default value for `Flexbox`. – tacoshy Jul 03 '22 at 17:12

Need logo on the left and links on the right

3 Answers3