CODEWITHSUNDEEP
csstwitter-bootstrap
jean d'arme
jean d'arme

Reputation: 4343

Adding profile option next to navbar

I have made a navbar, but I still have to add such thing: enter image description here

A profile picture and name next to it and then company name below the name and two buttons below them (red lines). I can't get through this.

Here is the code:

<nav class="navbar navbar-default">
    <div class="container-fluid" style="height: 100px; max-width:1200px">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
         <img src="logo.png">
        </a>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav" style="padding-top: 35px">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
          <li><a href="#">item 4</a></li>
          <li><a href="#">About Us</a></li>

        </ul>

        <img src="obrazek.jpg" style="width:80px; height: 80px; border-radius: 50%; margin-top: 10px">                                      

      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

Upvotes: 1

Views: 595

Answers (1)

N. Ivanov
N. Ivanov

Reputation: 1823

Working example:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="container-fluid" style="height: 100px; max-width:1200px">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
         <img src="logo.png">
        </a>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav" style="padding-top: 35px">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
          <li><a href="#">item 4</a></li>
          <li><a href="#">About Us</a></li>

        </ul>

        <img src="obrazek.jpg" style="width:80px; height: 80px; border-radius: 50%; margin-top: 10px">         <div style="display:inline-block;">                             
          <span>some name</span><br>
          <span>company name</span><br>
          <button>btn1</button><button>btn2</button>
        </div>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

I just want to remind you, that SO is not a free coding service, nor a tutorial website.

Hope this helps!

Upvotes: 2

Related Questions