Is there possible way to use icons from http://zavoloklom.github.io/material-design-iconic-font/icons.html as a markers for elements?
use :before selector with Unicode the icon
li:before {
font-family: 'Material-Design-Iconic-Font';
content: '\f34e';
margin:0 15px 0 -15px;
}
https://jsfiddle.net/Soufiane_Abid/8fwyfdyk/
or
<div class="list-group">
<a class="list-group-item" href="#"><i class="zmdi zmdi-home zmdi-hc-fw">
</i> Home</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-inbox zmdi-hc-fw">
</i> Inbox</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-star zmdi-hc-fw">
</i> Starred</a>
<a class="list-group-item" href="#"><i class="zmdi zmdi-email-open zmdi-hc-fw"></i> Drafts</a>
</div>
use the class for icon example google icon
<i class="zmdi zmdi-google"></i>
before that you most be included in HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
Related
Hello i am trying to make a navbar in laravel with bootstrap, i am not that good in front-end so i am learning. The navbar in bigger screen shows good but in smaller one the buttons are more to the right side of the screen. This is the code that i have done:
Html:
<div>
<nav id="sidebar" class="active">
<div class="text-start">
<div class="sidebar-header">
<img src="{{ asset('assets/img/cash-flow.png') }}" class="image" alt="logo" class="app-logo">
</div>
<div class="horizontal-menu">
<div class="row">
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-home"></i> Dashboard</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-list"></i>
Veprime</button>
<div class="dropdown-content">
<i class="fas fa-solid fa-plus"></i> Porosite
<i class="fas fa-money-bill-wave"></i> Konfirmo shpenzim
<i class="fas fa-receipt"></i> Konfirmo Arketim
<i class="fas fa-solid fa-user-pen"></i> Veprimet e mia
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-check-to-slot"></i> Arka</button>
<div class="dropdown-content">
<i class="fas fa-cash-register"></i> Arka
<i class="fas fa-coins"></i> Konvertim
<i class="fas fa-solid fa-hand-holding-dollar"></i> Monedhat
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-screwdriver-wrench"></i> Administrimi</button>
<div class="dropdown-content">
<i class="fas fa-user"></i> Perdoruesit
<i class="fas fa-random"></i> Rolet
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-solid fa-file-invoice"></i> Faturimi</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-regular fa-share-from-square"></i> Shpenzimet e mia</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<a href="#" id="nav2" class="nav-item nav-link dropdown-toggle text-secondary" data-bs-toggle="dropdown" aria-expanded="false"> <button class="dropDownButton">
<i class="fas fa-user"></i> <span>{{ auth()->user()->name }}</span>
</button></a>
<div class="dropdown-profile">
<i class="fas fa-address-card"></i> Profili
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="dropdown-item">
<i class="fas fa-sign-out-alt">
</i> Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
#include('partials.menu-horizontal')
CSS
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!--Font Awesome-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts-->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!--MDB-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css"
rel="stylesheet"
/>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"
></script>
<style>
.dropDownButton {
background-color: white;
color: #6c757d;
padding: 16px;
font-size: 16px;
border: none;
width:200px;
}
.horizontal-menu{
width:850%;
top:10px;
margin-left: 210%;
}
.dropdown {
width:90px;
margin-top: -55px;
margin-left: 6%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 200%;
z-index: 1;
}
.dropdown-profile {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 220%;
z-index: 1;
}
.dropdown-profile a{
color: black;
padding: 12px 16px;
text-decoration: none;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a{
color:#6c757d;
}
.dropdown-content a:hover {background-color: #2196f3; color:white;}
.dropdown-item:hover {background-color: #2196f3; color:white;}
.dropdown:hover .dropdown-profile {display: block;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropDownButton {background-color: #2196f3; color:white;}
.image{
width:100px;
height:48px;
margin-left: 150%;
}
</style>
How it looks like in smaller screen:
How it looks in bigger screen:
As you can see the admin is off the screen i need the navbar to stay static to the changes. My css is for sure bad as i said im learning.
This is not the proper way of using navbar of bootstrap.
Check out this method in which the use of css is minimal, and mosly used boostrap class and components
.navbar-logo {
width: 140px;
}
.dropdown-menu{
background-color: #f1f1f1;
}
.dropdown-item > i ,.nav-link > i{margin-right:8px;}
.nav-link{white-space:nowrap}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid navbar-logo" src="https://cashflow.io/wp-content/uploads/2021/03/CashflowLogo.png" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-home"></i>Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-list"></i>Veprime
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-plus"></i>Porosite</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-money-bill-wave"></i>Konfirmo shpenzim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-receipt"></i>Konfirmo Arketim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-user-pen"></i>Veprimet e mia</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-check-to-slot"></i>Arka
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-cash-register"></i>Arka</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-coins"></i>Konvertim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-hand-holding-dollar"></i>Monedhat</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-screwdriver-wrench"></i>Administrimi
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-user"></i>Perdoruesit</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-random"></i>Rolet</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-solid fa-file-invoice"></i>Faturimi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-regular fa-share-from-square"></i>Shpenzimet e mia</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>Admin
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-address-card"></i>Profili</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt">
</i>Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I fixed my code by using this example in W3SCHOOLS. Code Example
I have a navbar with center aligned menu items, of which some are dropdown-menus. The navbar and dropdown menu are 100% width but I would like the drop-down menu to be say 60% width and still centre aligned.
HTML:
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #8B0000;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown megamenu-li">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-1" data-toggle="dropdown">
Drop down
</a>
<div class="dropdown-menu megamenu" aria-labelledby="navitem-1">
<div class="row">
<div class="col-sm-6 col-lg-3">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-sm-6 col-lg-3">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Item
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
Item
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
CSS :
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
}
Please see demo here: https://jsfiddle.net/stackoverflow123/53fn2kop/
Reducing the .megamenu width reduces the downdown-menu panel as expected, but it stops it being centrally aligned.
Thank you in advance
desired layout
I managed to approach your goal (if I understood right) applying mainly the next style to the dropdown-menu, but only on the specific bootstrap break-point (LG), and removing all of your style:
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
Also, I removed the outer row and col-12 and replaced the container by container-fluid, and make some minor changes to the items on the dropdown-menu so they look centered. You can check it below:
#media (min-width: 992px)
{
.custom-dropdown {
position: fixed !important;
width: 60vw;
left: 20vw !important;
top: 45px !important;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #8B0000;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent2">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-1" data-toggle="dropdown">
Drop down
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-1">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" aria-haspopup="true" id="navitem-2" data-toggle="dropdown">
Drop down 2
</a>
<div class="dropdown-menu custom-dropdown" aria-labelledby="navitem-2">
<div class="row">
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
<div class="col-6 text-center">
<a class="dropdown-item" href="#">Item</a>
<a class="dropdown-item" href="#">Item</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
Item
</li>
<li class="nav-item">
Item
</li>
<li class="nav-item">
Item 333
</li>
<li class="nav-item">
Item 99999
</li>
</ul>
</div>
</nav>
</div>
Building off of #Shidersz approach, I wanted a full-width centered nav bar with columns. I used bootstrap 4 and the added a custom-dropdown class. This requires the navbar to be fixed-top or scrolling doesn't have the expected behavior.
.custom-dropdown {
position: fixed !important;
width: 100vw;
left: 0vw !important;
top: 50px !important;
}
<nav class="navbar fixed-top navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-5">
<div class="container">
<a class="navbar-brand">Full Width Awesomness</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark">Top Sellers</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu custom-dropdown border-0 border-bottom text-center" aria-labelledby="navbarDropdown">
<div class="row">
<div class="col-sm-3">
<label class="font-weight-bold">Item 1 </label>
<a class="dropdown-item" href="#">Top Sellers</a>
<a class="dropdown-item" href="#">Hot and New</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-3">
<label>DVDs </label>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-3">
<label>Books </label>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-3">
<label>CDs </label>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-2 pt-5">
<div class="row" style="background-color: pink; height:800px;">
CONTENT
</div>
</div>
fiddle here:
https://jsfiddle.net/mgervasoni/71c0yub4/24/
I want to add an instagram icon to the footer of my website.
I have created the circle and changed the colour, but I cant get the icon for Instagram to work.
This is what it looks like at the moment
Heres the code in the Static Block;
<a class="first" href="#" title="Join us on Facebook">
<span class="icon icon-hover i-facebook-w" style="background-color: #3b5998"></span>
</a>
<a href="#" title="Follow us on Instagram">
<span class="icon icon-hover i-instagram-w" style="background-color: #c13584"></span>
</a>
<a href="#" title="Youtube">
<span class="icon icon-hover i-youtube-w" style="background-color: #bb0000"></span>
</a>
<a href="http://twitter.com/infortis" title="Follow Infortis on Twitter">
<span class="icon icon-hover i-twitter-w" style="background-color: #00aced"></span>
</a>
<a href="#" title="Pinterest">
<span class="icon icon-hover i-pinterest-w" style="background-color: #cb2027"></span>
</a>
The Instagram icon code is;
.ic-instagram:before {
content: "\e22f";
}
I'm newbee in Boostrap and I try since 2 days to manage Boostrap carouseul mode.
My images in slide are Disproportionate when I resize navigator ! I was unable to find solution. I try many solution in CSS but I naver finnd solution.
I use default CSS parameter, present in carousel mode. I try carousel mode from w3schools (image are not corrupt when we resize navigator).
My CSS
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
margin: auto;
}
My HTML
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="media/image1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans"> bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Plus d'informations</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="media/image2.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Secucampus.com</h1>
<p class="trans">bla bla</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contactez nous</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="media/image3.jpg" alt="">
<div class="container">
<div class="carousel-caption" style="text-align:left">
<h1>bla </h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Contenu des cours</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
The result when I resize image to Smarphone mode :
Thank for your help
Regard
Edit : Banzay :
I try to remove it and the result decrease image in hignht when I reduce the width of the navigateur.
I am sure somebody has aleady posted such a question but I could not find a solution.
I am using Ruby on Rails, Brootstrap and I want to be my dropdown menu(whole) in the middle of the page, but the text (links like We, What we do and etc...) in the dropdown-menu should be left-sided.
How can I do it?
<div class="btn-toolbar">
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
About us
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong> We</strong>
</a>
</li>
<li>
<div class="mcol">
<ul class ="sub">
<div class ="subcolumns menuactivity">
What we do
</li>
Countries
</div>
</ul>
<li>
<a href="del">
<strong>References </strong>
</a>
</li>
</ul>
<div class="btn-group">
<button id="action-btn" class="btn dropdown-toggle" data-toggle="dropdown">
News & Events
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="del">
<strong>Calender</strong>
</a>
</li>
<ul class ="sub">
<div class ="subcolumns menuactivity">
<li>
News archive
</li>
</ul>
</div>
</ul>
</div>
If you're using bootstrap as it is by default you can try below
<a class="pull-left" href="details"> What we do </a>
I have updated with an example.
http://jsfiddle.net/acc8t/
I did this by using below css
.sub{margin-left:0px;}
I have founf as well another solution already.
Just to put in css the following code:
.dropdown-menu {
text-align: left;
}
.btn-toolbar{
text-align: center;
padding-bottom:40px;
}