htmlcsstwitter-bootstrapdrop-down-menuvertical-alignment
Vertically align multiple dropdown in Bootstrap
Problem:
Vertically aligning multiple dropdown's in Bootstrap. Right now the left-hand side of the navbar is correctly aligned but not the right one. Appreciate any feedback how you should reason in order to solve this.
Minimal Working Example (MWE):
<head>
<meta charset="utf-8">
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Loading Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Loading Fonts Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap Languages -->
<link href="https://webbutveckling-supervisor.c9users.io/sas/assets/css/languages.min.css" rel="stylesheet">
<!-- Custom CSS -->
<!--<link href="assets/css/style.css" rel="stylesheet">-->
<!-- Favicon -->
<link rel="shortcut icon" href="asssets/images/favicon.ico">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<style>
html, body {
height: 100%;
min-height: 100%;
background-color: #eae8db;
padding-top: 30px;
}
/*=========== Positioning ============*/
.container {
width: 80%;
min-height: 100%;
padding: 0px 0px 75px 0px;
margin: 0 auto;
}
/*============ Navigation ============*/
.navbar {
height: 100%;
background-color: blue;
}
.nav li {
display:inline-block;
float:none;
margin:0;
vertical-align:middle;
}
.navbar-nav {
background-color: red;
}
.navbar-right {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Navigation -->
<nav class="navbar" role="navigation">
<!-- Collect the nav links -->
<ul class="nav navbar-nav">
<li><a href="/"><img src="http://placehold.it/450x100" alt=""></a></li>
<li><a href="/">Boka resa</a></li>
<li><a href="/">Erbjudanden</a></li>
<li><a href="/">Resmål</a></li>
<li><a href="/">Företag</a></li>
<li><a href="/">Charter</a></li>
<li><a href="/">Kundtjänst</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Logga ut"><i class="fa fa-fw fa-lock"></i> Logga ut <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/"><i class="fa fa-fw fa-paint-brush"></i> Test 1</a></li>
<li><a href="/"><i class="fa fa-fw fa-shopping-cart"></i> Test 2</a></li>
</ul>
</li>
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Språk"> <i class="lang-sm" lang="sv"> </i> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><span class="lang-sm lang-lbl-full" lang="sv"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ar"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="be"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="bg"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="cs"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="da"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="de"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="el"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="en"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="es"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="et"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fi"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fr"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ga"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="hr"></span></li>
</ul>
</li>
<li><a href="/"><i class="fa fa-fw fa-search"></i></a></li>
</ul>
</nav>
<!-- / Navigation -->
</div>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/flat-ui-pro.js"></script>
<!-- JS for experiment -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/application.js"></script>
</body>
</html>
https://jsfiddle.net/58q66kr6/
Output:
Desired output:
Making the right-hand navigation vertically in the middle in order to align with the 450x100 placeholder.
Solution
A solution for you is to create a new 'li' with visibility:hidden and with the same height of the first nav :
<head>
<meta charset="utf-8">
<title>Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Loading Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Loading Fonts Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap Languages -->
<link href="https://webbutveckling-supervisor.c9users.io/sas/assets/css/languages.min.css" rel="stylesheet">
<!-- Custom CSS -->
<!--<link href="assets/css/style.css" rel="stylesheet">-->
<!-- Favicon -->
<link rel="shortcut icon" href="asssets/images/favicon.ico">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--\[if lt IE 9\]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<!\[endif\]-->
<style>
html, body {
height: 100%;
min-height: 100%;
background-color: #eae8db;
padding-top: 30px;
}
/*=========== Positioning ============*/
.container {
width: 80%;
min-height: 100%;
padding: 0px 0px 75px 0px;
margin: 0 auto;
}
/*============ Navigation ============*/
.navbar {
height: 100%;
background-color: blue;
}
.nav li {
display:inline-block;
float:none;
margin:0;
vertical-align:middle;
}
.navbar-nav {
background-color: red;
}
.navbar-right {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Navigation -->
<nav class="navbar" role="navigation">
<!-- Collect the nav links -->
<ul class="nav navbar-nav">
<li><a href="/"><img src="http://placehold.it/450x100" alt=""></a></li>
<li><a href="/">Boka resa</a></li>
<li><a href="/">Erbjudanden</a></li>
<li><a href="/">Resmål</a></li>
<li><a href="/">Företag</a></li>
<li><a href="/">Charter</a></li>
<li><a href="/">Kundtjänst</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li style="visibility:hidden;height:130px;width:0px;"></li>
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Logga ut"><i class="fa fa-fw fa-lock"></i> Logga ut <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/"><i class="fa fa-fw fa-paint-brush"></i> Test 1</a></li>
<li><a href="/"><i class="fa fa-fw fa-shopping-cart"></i> Test 2</a></li>
</ul>
</li>
<li class="dropdown" role="menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Språk"> <i class="lang-sm" lang="sv"> </i> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><span class="lang-sm lang-lbl-full" lang="sv"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ar"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="be"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="bg"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="cs"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="da"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="de"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="el"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="en"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="es"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="et"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fi"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="fr"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="ga"></span></li>
<li><span class="lang-sm lang-lbl-full" lang="hr"></span></li>
</ul>
</li>
<li><a href="/"><i class="fa fa-fw fa-search"></i></a></li>
</ul>
</nav>
<!-- / Navigation -->
</div>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/flat-ui-pro.js"></script>
<!-- JS for experiment -->
<script src="https://webbutveckling-supervisor.c9users.io/sas/assets/js/application.js"></script>
</body>
</html>
- ASP.NET MVC: Delete and Update Methods Not Working (HTTP ERROR 404)
- CSS: Width in percentage and Borders
- How to make font-awesome caret change from caret-right to caret-down?
- Animate text while using background-clip with text
- SVG Draw a circle with 4 sectors
- How to get only directly contained text in DOM element in Javascript?
- How can write the line in Sphinx reST?
- is quirks mode legit?
- How to create a border for an image that's been resized with object-fit: scale-down
- Trim an audio file using javascript (first 3 seconds)
- Text flowing outside div in IE with angular material
- Web Project is not deploying
- Textarea value not getting posted with form
- Parse HTML content into an associative array?
- How to display an image in HTML via a JSON file using Javascript
- Header and footer duplicating in html tree
- How do I programmatically set the value of a select box element using JavaScript?
- Triggering a file download without any server request
- Is the responsive-simulation in Chrome DevTools always accurate?
- How can I how one div and hide multiple others with jQuery?
- Javascript - Copy to clipboard without concrete Id in HTML tag
- Finding the FORM that an element belongs to in JavaScript
- html page break adds 3 extra blank pages
- How to properly make 301 redirect
- Textract JSON data to Image drawing with Kendo UI Angular 11
- I am using Avada theme, on wordpress goddady . Button and text inside container that is displayed in wordpress admin. for some reason it not displayed
- Failed to execute 'atob' on 'Window'
- MudTable make table rows draggable
- use of htmlspecialchars()
- CSS selectors, target an empty span but not span that has an <a> tag or tags in it