1
У меня есть пример navbar, который я хочу изменить для себя здесь. В настоящее время ПолноеИмя пользователя расположен на той же линии, как так:
Выровнять имя и фамилию на отдельных строках в navbar
Как изменить положение FULLNAME таким образом они отображаются и выравниваются, как это:
Я createed маркированного упорядоченный список , но я думаю, что это семантически некорректно, и мы не можем поместить ul внутри ссылки. Он также не работал в IE, поэтому я вернулся к первому.
Любые идеи были бы полезны.
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>
\t \t \t \t <a href="#" class="navbar-brand"><img src="logo.png" height="30" width="180"></a>
\t \t \t </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>
\t \t \t \t \t \t \t <span class="info">
\t \t \t \t \t \t \t \t Subscriber focused email design
\t \t \t \t \t \t \t \t Extra sample line
\t \t \t \t \t \t \t \t Extra sample line
\t \t \t \t \t \t \t \t Extra sample line
\t \t \t \t \t \t \t </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">
\t \t \t \t \t <a class="btn btn-default btn-lg create-profile-btn" href="#" role="button">Create a profile</a>
\t \t \t \t </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">
\t \t \t \t \t \t \t <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">
\t \t \t <a href="#"></a>
\t \t \t </div>
\t \t \t <div style="height: 1em;">
\t \t \t </div> -->
</div>
</div>
</div>
</div>
@Muhammed Usman, html и css разные, я обновил его сейчас, так что вы можете проверить его, как я могу это исправить в IE? – Krys
@Krystyna add 'span.avatar {flaot: left;}' –
@Muhammed, который действительно не работает, выпадающее меню затронуто, а фоновая зависание перепутана – Krys