Align firstname and lastname on seperate lines in navbar - html

Question

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:
How do I change the fullname position so they are displayed and aligned like this:
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>
<img src="logo.png" height="30" width="180">
</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><span class="label label-default">4:00 AM</span><span class="info">Favourites Snippet</span>
</li>
<li class="divider"></li>
<li><span class="label label-warning">4:30 AM</span><span class="info">Email marketing</span>
</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>View All
</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>ssdfsdf
</li>
<li class="divider"></li>
<li>fsfsdfs
</li>
<li class="divider"></li>
<li>sfsfsf
</li>
<li class="divider"></li>
<li>fsdfsdsd
</li>
<li class="divider"></li>
<li>dlfjsdlfjs
</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">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>

Answer 1

A simple </br> would do:
<span>First Name </br> <strong>Last Name<strong> </span>

Answer 2

.navbar-login {
width: 305px;
padding: 10px;
padding-bottom: 0px;
}
.navbar-login-session {
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
}
.icon-size {
font-size: 87px;
}
.glyphicon-user {
position: absolute !important;
margin: -5px 0 0;
left: 5px;
top: 50% !important;
}
.glyphicon-chevron-down {
position: absolute !important;
margin: -5px 0 0;
right: 5px;
top: 50% !important;
}
.dropdown .dropdown-toggle {
position: relative;
padding-right: 35px;
padding-left: 35px;
}
.name {
display: block;
}
<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="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a target="_blank" href="#" class="navbar-brand">My sApp.</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Inicio
</li>
<li class="active">Inspirado en este ejemplo
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">DropDown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Link 2
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle text-right username" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<span class="name">Nombre</span>
<strong class="name">lastname</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Nombre Apellido</strong>
</p>
<p class="text-left small">correoElectronico#email.com</p>
<p class="text-left">
Actualizar Datos
</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
Cerrar Sesion
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>

Answer 3

You can do this by changing a little bit the structure of this :
<span class="nombre">
<span>Nombre</span>
<span><strong>lastname</strong></span>
</span>
And the relevant CSS :
.username .nombre {width: 75px; display: inline-block; text-align: right; margin-right: 10px;}
.glyphicon { vertical-align: top; padding-top: 15px; }
.glyphicon:first-child { padding-top: 10px}
See this fiddle

Answer 4

<span style="float:right">Nombre</span>
<p class="clear">
<span style="float:right"><strong>lastname</strong></span>
in css add
clear: both;
height: 0;
margin: 0;
padding: 0;
and use it in situations like this :)
you could also use something like this
<span style="float:right">Nombre</span>
<br/>
<span style="float:right"><strong>lastname</strong></span>
but i think that will separate them too much