0

I would like to add a logo at the left or the center of my navbar, can anyone tell me how could I achieve this?

I have tried this but when I do add these lines to my code, my links are upper than the logo, looks like the logo is pushing them or something. Anyone?

.logo {
    max-width:100px;
    display:inline-block;
}

enter image description here

Here is my code:

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap");

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Nunito", sans-serif;
}

 .nav {
     background-color: #fff;
     overflow: hidden;
     justify-content: space-between;
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 0.75rem;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.10);
}
 .nav .dropdown .dropbtn {
     font-size: 0.75rem;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
     font-family: "Nunito", sans-serif;
     cursor: pointer;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}
 
<div class="nav" id="topnav">
        <a href="/feed">Feed</a>
        <a href="/discover">Discover</a>
        <a href="/jobs">Jobs</a>
        <div class="dropdown">
            <button class="dropbtn">Profile</button>
            <div class="dropdown-content">
                <a href="/profile">My profile</a>
                <a href="/projects">My projects</a>
                <a href="/settings">Settings</a>
                <a href="/help">Help</a>
            </div>
        </div>
        <a href="/about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>

Also it can be centered, I'd be happy too. Thank you!

Andrzej Jesztar
  • 121
  • 8

3 Answers3

0

Try using this code:

<a href="link-to-website" class="logo-left"><img src="/path/to/image.png"></a>

Where I found the answer.

theWellHopeErr
  • 1,856
  • 7
  • 22
AgentLoneStar007
  • 117
  • 3
  • 12
0

First of all, justify-content: start; only works on an element with display: flex;.

USing display: flex; on the .nav element, use align-items to vertically center the elements;

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap");

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Nunito", sans-serif;
}

 .nav {
    background-color: #fff;
    overflow: hidden;
    justify-content: start;
    
    display: flex;         /* <-- */
    align-items: center;   /* <-- */
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 0.75rem;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.10);
}
 .nav .dropdown .dropbtn {
     font-size: 0.75rem;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
     font-family: "Nunito", sans-serif;
     cursor: pointer;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}
<div class="nav" id="topnav">
    <a><img id='logo' src='https://placehold.it/150x40'/></a>
    <a href="/feed">Feed</a>
    <a href="/discover">Discover</a>
    <a href="/jobs">Jobs</a>
    <div class="dropdown">
        <button class="dropbtn">Profile</button>
        <div class="dropdown-content">
            <a href="/profile">My profile</a>
            <a href="/projects">My projects</a>
            <a href="/settings">Settings</a>
            <a href="/help">Help</a>
        </div>
    </div>
    <a href="/about">About</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
0stone0
  • 34,288
  • 4
  • 39
  • 64
0

I'm added a css code into .nav like

.nav {
 background-color: #fff;
 overflow: hidden;
 justify-content: space-between;
 align-items:center;
 display:flex
 }

then added a .nav .logo-img into bottom

.nav .logo-img {
position:relative;
justify-content:start;
}


@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap");

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Nunito", sans-serif;
}

 .nav {
     background-color: #fff;
     overflow: hidden;
     justify-content: space-between;
     align-items:center;
     display:flex
}
 .nav a {
     float: left;
     display: block;
     color: rgba(0, 0, 0, 0.8);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 0.75rem;
}
 .nav a:hover {
     background-color: #fff;
     color: #000;
}
 .nav .active {
     color: #000;
     font-weight: 600;
}
 .nav .icon {
     display: none;
}
 .nav .dropdown {
     float: left;
     overflow: hidden;
}
 .nav .dropdown:hover .dropbtn {
     background-color: #fff;
     color: #000;
}
 .nav .dropdown:hover .dropdown-content {
     display: block;
     border-radius: 4px;
     border: 1px solid rgba(0, 0, 0, 0.10);
}
 .nav .dropdown .dropbtn {
     font-size: 0.75rem;
     border: none;
     outline: none;
     color: rgba(0, 0, 0, 0.8);
     padding: 14px 16px;
     background-color: inherit;
     margin: 0;
     font-family: "Nunito", sans-serif;
     cursor: pointer;
}
 .nav .dropdown-content {
     display: none;
     position: absolute;
     background: #fff;
     min-width: 160px;
     z-index: 1;
}
 .nav .dropdown-content a {
     float: none;
     color: #9b9b9b;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     transition: 0.4s ease;
}
 .nav .dropdown-content a:hover {
     background-color: #fff;
     color: #000;
}
.nav .logo-img {
    position:relative;
    justify-content:start;
}
<div class="nav" id="topnav">
        <a href="#" class="logo-img"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png" width="150px"></a>
        <a href="/feed">Feed</a>
        <a href="/discover">Discover</a>
        <a href="/jobs">Jobs</a>
        <div class="dropdown">
            <button class="dropbtn">Profile</button>
            <div class="dropdown-content">
                <a href="/profile">My profile</a>
                <a href="/projects">My projects</a>
                <a href="/settings">Settings</a>
                <a href="/help">Help</a>
            </div>
        </div>
        <a href="/about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
Adhitya
  • 660
  • 1
  • 4
  • 18