CODEWITHSUNDEEP
htmlcss
github292929
github292929

Reputation: 185

Bootstrap - How to make a navbar?

Trying to create a navbar with company name on the left, login and sign up button on right with icons next to them. At the moment everything is all over the place. Any ideas?

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%;
}

enter image description here

Upvotes: 0

Views: 79

Answers (2)

Oliver Paredes
Oliver Paredes

Reputation: 7

To make a navbar, in your "style" tag, write

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;
}

(You can change up the font, and colors if you like) now, in your "body" tag, write

<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>

... and Voila! There you go. A spicy Topnav!

Upvotes: 1

Jaocampooo
Jaocampooo

Reputation: 481

Check out the full bootstrap code below, with d-flex and justify-content, we are able to position them.

<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>

OPEN THE SNIPPET IN FULLSCREEN

Upvotes: 0

Related Questions