Krystyna Krystyna - 6 months ago 10
HTML Question

Align firstname and lastname on seperate lines in navbar

I have an example navbar that I wish to modify for my own here. Currently the user's fullname is positioned on the same line like so:

current fullname displayed like this

How do I change the fullname position so they are displayed and aligned like this:

enter image description here

I createed an un-ordered list, but I think that is semantically incorrect and we can't put a

ul
inside a link anyway. It also wasn't working in IE either, so I am back to square one.

Any ideas would be helpful.



body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
color: #010101;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-default .navbar-header {
min-height: 80px;
}
.navbar-default .navbar-header button.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
color: #010101;
padding-top: 5px;
}
/* searchbox */
.navbar-nav > .dropdown.search .input-group {
padding-top: 15px;
}
.navbar-nav > .dropdown.search .input-group input.form-control {
padding: 0 10px 0 0;
background-color: #fff;
color: #010101;
border-radius: 0;
border: 0;
box-shadow: none;
font-size: 16px;
font-weight: 100;
}
.navbar-nav > .dropdown.search .input-group input.form-control:hover {
background-color: #fff;
}
.navbar-nav > .dropdown.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: #fff;
border-radius: 0;
}
.navbar-nav > .dropdown.search .input-group-btn button:hover {
background-color: #fff;
color: #ff5500;
}
.navbar-nav > .dropdown.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
/* bell notification and dropdown */
.navbar-default .navbar-nav > .open > a.inbox,
.navbar-default .navbar-nav > .open > a.inbox:focus,
.navbar-default .navbar-nav > .open > a.inbox:hover {
background-color: #fff;
padding-top: 15px;
margin-bottom: 5px;
}
.nav > li.dropdown.bell > a:hover,
.nav > li.dropdown.bell > a:focus {
color: #ff5500;
background-color: transparent;
}
.navbar-nav > .dropdown.bell li a:hover {
color: #ff5500;
background-color: transparent;
}
.navbar-nav > .dropdown.bell .badge-count {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
.navbar-nav > li > .dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
}
.navbar-nav > li > .dropdown-menu.bell li a {
padding-top: 5px;
padding-bottom: 5px;
white-space: normal !important;
width: 350px;
}
.navbar-nav > li > .dropdown-menu.bell li a span.info {
display: block;
padding: 0 5px 0 5px;
}
.navbar-nav > li > .dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.navbar-nav > li > .dropdown-menu.bell .label {
background-color: transparent;
color: #aaa;
font-weight: 100;
}
/* bell notification and dropdown caret */
.navbar-nav > li > .dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 9%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar-nav > li > .dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 9%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
/* create profile button */
.navbar-nav > .dropdown.create-profile a.create-profile-btn {
width: 200px;
padding: 12px;
margin-top: 18px;
}
.navbar-nav > .dropdown.create-profile a.btn-default {
background-color: #ff5500;
border-color: #ff5500;
color: #fff;
}
.navbar-nav > .dropdown.create-profile a.btn-default:hover,
.navbar-nav > .dropdown.create-profile a.btn-default:focus,
.navbar-nav > .dropdown.create-profile a.btn-default:active {
color: #fff;
border-color: 0;
/*set the color you want here*/
}
/* user login and dropdown */
.navbar-nav > .user-logged-in span.firstname {
font-size: 16px;
color: #010101;
}
.navbar-nav > .user-logged-in span.surname {
font-size: 16px;
color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8;
font-size: 14px;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a {
margin: 5px 0px;
color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li.divider {
padding: 0;
margin: 0 20px;
}
.fullname {
float: right;
padding-right: 10px;
}
.drop-arr {
float: right;
padding-top: 10px;
}
span.avatar {
padding-right: 90px;
}
/* Large desktop */
@media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
.container {
width: auto;
}
.navbar-default .navbar-brand {
font-size: 40px;
}
/* bell notification and dropdown */
.navbar-default .navbar-nav > .open > a.inbox,
.navbar-default .navbar-nav > .open > a.inbox:focus,
.navbar-default .navbar-nav > .open > a.inbox:hover {
width: 100% !important;
background-color: #e7e7e7;
margin-bottom: 0px;
}
.navbar-nav > li > .dropdown-menu.bell li a {
width: 100%;
}
.navbar-nav > li > .dropdown-menu.bell:before,
.navbar-nav > li > .dropdown-menu.bell:after {
display: none;
}
.navbar-nav > li > .dropdown-menu.bell li a {
text-align: left;
}
.navbar-nav > .dropdown.bell,
.navbar-nav > .user-logged-in {
text-align: center;
}
/* searchbox */
.navbar-nav > .dropdown.search {
padding-left: 10px;
padding-right: 10px;
margin-top: 0;
width: 100%;
overflow: hidden;
}
.navbar-nav > .dropdown.search .input-group {
padding-top: 0;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.navbar-default .navbar-brand {
font-size: 30px;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>


<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1>
<a href="#" class="navbar-brand"><img src="teamor-logo.png" height="30" width="180"></a>
</h1>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">

<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>

<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-count">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><a href="#"><span class="label label-default">4:00 AM</span><span class="info">Favourites Snippet</span></a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">4:30 AM</span><span class="info">Email marketing</span></a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>
<span class="info">
Subscriber focused email design
Extra sample line
Extra sample line
Extra sample line
</span></a>
</li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a>
</li>
</ul>
</li>

<!-- create profile button -->
<!-- <li class="dropdown create-profile">
<a class="btn btn-default btn-lg create-profile-btn" href="#" role="button">Create a profile</a>
</li> -->

<!-- user login information -->
<li class="dropdown user-logged-in">
<a href="#" class="dropdown-toggle username" data-toggle="dropdown">
<span class="avatar"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="drop-arr"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
<span class="fullname">
<span class="firstname">Jacky</span>
<br><span class="surname">Smith</span>
</span>

</a>

<ul class="dropdown-menu access-list" role="menu">
<li><a href="#">ssdfsdf</a>
</li>
<li class="divider"></li>
<li><a href="#">fsfsdfs</a>
</li>
<li class="divider"></li>
<li><a href="#">sfsfsf</a>
</li>
<li class="divider"></li>
<li><a href="#">fsdfsdsd</a>
</li>
<li class="divider"></li>
<li><a href="#">dlfjsdlfjs</a>
</li>
</ul>
</li </ul>
</div>
</div>
</div>
</div>


<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>


<!-- <div class="chevron right">
<a href="#"></a>
</div>

<div style="height: 1em;">
</div> -->




</div>
</div>
</div>

</div>




Answer

A simple </br> would do:

<span>First Name </br> <strong>Last Name<strong> </span>