0

I'd like to put my logo in the center of my navbar, how do I do that?

I am using Bootstrap 4 Utilities, so I have tried mx-auto but it didn't seem to work.

So I'm assuming there are some flexbox related properties to set up, but I have no idea which one to use since I think my code is very messy.

I mean, this ain't the right way to make a navbar, but I'm doing it this way to make it easier responsive, even though I have to set it up better.

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: #fff;
  color: #191919;
  height: 110vh;
  font-family: 'Nunito Sans', sans-serif;
}

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

.nav {
  clear: both;
  background-color: #fff;
  overflow: auto;
  justify-content: start;
  display: flex;
  align-items: center;
}

.nav a {
  display: block;
  color: #191919;
  text-align: center;
  padding: 18px 14px;
  font-weight: 800;
  text-decoration: none;
  font-size: 1rem;
  display: inline-block;
}

.nav a:hover {
  color: #191919 !important;
}

.nav .dropdown {
  float: left;
  overflow: hidden;
}

.nav .dropdown:hover .dropbtn {
  background-color: #fff;
  color: #191919;
}

.nav .dropdown:hover .dropdown-content {
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.nav .dropdown .dropbtn {
  font-size: 1rem;
  border: none;
  outline: none;
  color: #191919;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  cursor: pointer;
}

.nav .dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 160px;
  z-index: 1;
}

.nav .dropdown-content a {
  float: none;
  color: #191919;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: 0.4s ease;
  font-weight: 600;
}

.nav .dropdown-content a:hover {
  background-color: rgba(25, 25, 25, 0.034);
  color: #191919;
}

.nav .account {
  color: #191919;
  line-height: 1;
  font-size: 1rem;
  font-weight: 600;
}
<div class="nav" id="topnav">
  <a href="/">
    <img src="https://nosfera.app/assets/img/logo.png" id="logo" alt="">
  </a>
  <a href="/">Home</a>
  <a href="/feed">Feed</a>
  <a href="/discover">Discover</a>
  <a href="/messages">Messages</a>
  <div class="dropdown">
    <button class="dropbtn">Account</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="/login" class="account" alt="Log in">Log in (or <strong>sign up</strong>)</a>
  <a href="/logout" class="account" alt="Log out">Log out</a>
</div>

Excuse my english by the way.

Andrzej Jesztar
  • 121
  • 8
  • if the logo is center, what is the position of navbar's text like 'home','feed','discover'. Would you like to provide an image which can show what is the expected outcome? – Red Wing Justice Chan Dec 10 '20 at 12:54

1 Answers1

0

Firstly, wrap those three sections as menus, logo and login-login out. then to nav element change justify-items to space-between. Move your logo section as second section.

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: #fff;
  color: #191919;
  height: 110vh;
  font-family: 'Nunito Sans', sans-serif;
}

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

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

.nav a {
  display: block;
  color: #191919;
  text-align: center;
  padding: 18px 14px;
  font-weight: 800;
  text-decoration: none;
  font-size: 1rem;
  display: inline-block;
}

.nav a:hover {
  color: #191919 !important;
}

.nav .dropdown {
  float: left;
  overflow: hidden;
}

.nav .dropdown:hover .dropbtn {
  background-color: #fff;
  color: #191919;
}

.nav .dropdown:hover .dropdown-content {
  display: block;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.nav .dropdown .dropbtn {
  font-size: 1rem;
  border: none;
  outline: none;
  color: #191919;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 800;
  cursor: pointer;
}

.nav .dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 160px;
  z-index: 1;
}

.nav .dropdown-content a {
  float: none;
  color: #191919;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: 0.4s ease;
  font-weight: 600;
}

.nav .dropdown-content a:hover {
  background-color: rgba(25, 25, 25, 0.034);
  color: #191919;
}

.nav .account {
  color: #191919;
  line-height: 1;
  font-size: 1rem;
  font-weight: 600;
}
<div class="nav" id="topnav">
<div>
  <a href="/">Home</a>
  <a href="/feed">Feed</a>
  <a href="/discover">Discover</a>
  <a href="/messages">Messages</a>
  <div class="dropdown">
    <button class="dropbtn">Account</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>
  </div>
  <div>
    <a href="/">
    <img src="https://nosfera.app/assets/img/logo.png" id="logo" alt="">
  </a>
  </div>
  <div>
  <a href="/login" class="account" alt="Log in">Log in (or <strong>sign up</strong>)</a>
  <a href="/logout" class="account" alt="Log out">Log out</a>
    <div>
</div>
Dhananjayan
  • 562
  • 5
  • 23