Блог

Пытаюсь создать панель навигации с названием компании слева, кнопкой входа и регистрации справа со значками рядом с ними. На данный момент все повсюду. Есть идеи?

HTML:

 <div class="cover-container d-flex w-100 p-3 mx-auto flex-column whitelight">
       <header class="masthead mb-auto">
         <div class="inner">
            <h3><a class="tuitune-main gold-text" style="text-decoration: none;" href="index.php"">Company Name</a></h3>
            <nav class="nav nav-masthead justify-content-center">
              <a class="nav-link text-black max-height" href="login.php">Login<img class="user-png" src="Style/user.png"></a>
              <a class="nav-link text-black" href="signup.php">Sign up</a>
            </nav>
          </div>
     </header>
  

CSS:

 
.user-png {
    max-width: 8%;
    max-height: 1%;
    vertical-align: auto;
    display: inline-block;
    padding-left: 3%;
}

.max-height {
    max-height: 10%;
}
  

Чтобы создать панель навигации, в вашем теге «style» напишите

 a {
font-family: monospace;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: Orange;
  color: black;
}

.topnav a.active {
  background-color: purple;
  color: white;
}
  

(Вы можете изменить шрифт и цвета, если хотите)
теперь в вашем теге «body» напишите

 <div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#stuff">Stuff</a>
  <a href="#morestuff">More Stuff</a>
  <a href="#moremorestuff">More Morre Stuff</a>
</div>

  

… и вуаля! Вот так. Пикантный Topnav!

Ознакомьтесь с полным кодом начальной загрузки ниже, с помощью d-flex и justify-content мы можем их позиционировать.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<nav class="navbar navbar-dark bg-dark navbar-expand-md bg-faded justify-content-center">
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Navbar 3</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">

        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
    </div>
</nav>  

ОТКРОЙТЕ ФРАГМЕНТ В ПОЛНОЭКРАННОМ РЕЖИМЕ