Align dropdown menus vertically in Bootstrap

Issue:

Struggling to vertically align multiple dropdown menus in Bootstrap. Currently, the left side of the navbar is properly aligned but not the right side. Seeking advice on how to approach this problem and find a solution.

Code Example:

<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="/">Book Trip</a></li>
          <li><a href="/">Deals</a></li>
          <li><a href="/">Destinations</a></li>
          <li><a href="/">Company</a></li>
          <li><a href="/">Charter</a></li>
          <li><a href="/">Customer Service</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown" role="menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="Logout"><i class="fa fa-fw fa-lock"></i> Logout <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="Language"> <i class="lang-sm" lang="sv">&nbsp;</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/

Current Output:

https://i.sstatic.net/QXult.png

Desired Output:

Need help aligning the right-hand navigation vertically in the middle to match with the 450x100 placeholder image.

htmlcsstwitter-bootstrapdrop-down-menuvertical-alignment

Answer №1

One potential solution is to add a new 'li' element with a style of visibility:hidden and set its height to match that of the first navigation item:

<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">&nbsp;</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://i.sstatic.net/XClTX.png

Answer №2

If you're aware that the image is 100 pixels in height with a 10 pixel padding around it, one way to vertically center it would be to add a margin-top: 40px;.

While there may be a more efficient method, this solution gets the job done.

Check out this demo

.navbar-right {
  margin: 40px 0 0;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Only one submenu can be opened at a time & click to close

I am encountering an issue with my list and submenus. When I click on List 1, submenu 1 opens but if I then click on List 2, submenu 2 opens while submenu 1 remains open. However, when I click on List 2 again, instead of just closing submenu 2, it toggles ...

jqueryhtmlcss

Tips for achieving a slanted div design

Is there a way to create a slanted div similar to the red div shown on this website? Below is the CSS I have attempted: #parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); ...

htmlcss

Utilizing Javascript / jQuery to eliminate specific CSS styles

I am facing an issue with the CSS code for a table positioned at the bottom of the screen. The current code includes a filter specifically for IE 8, but I need to make it compatible with IE 10 as well by removing the filter and adding a background color. ...

javascriptjquerycssinternet-explorer-10css-tables

What could be causing the Bootstrap icon to remain the same size without changing?

Take a look at this piece of code: <div class = "banner-image w-100 vh-100 d-flex justify-content-center align-items- center"> <div class = "content text-center"> <i class="bi-chevron-compact-down bi-7x"&g ...

htmlcssbootstrap-5bootstrap-icons

Avoid incorporating unicode characters in Angular 4

How can I prevent users from using unicode characters in a text field in my front-end developed with Angular 4 framework? For example: ½ -> U+00BD ('onehalf') ...

htmlangulartypescript

What is the method for obtaining the value of the second option in a select input field?

My form contains three select inputs : ... <tr> <td><b><?php echo _getText("service.OD.tbr_title.vollondona");?></b></td> <td> <select id="vollondona" name="vollondona" oncha ...

jqueryhtmldomselect

Can PHP be used to dynamically load a different stylesheet on a webpage?

Currently in the process of developing a mobile version of my website, I have determined that implementing an alternate stylesheet would be the most effective method to ensure compatibility with mobile devices. I am considering using a PHP script for use ...

phpcssmobilestylesheetalternate

Modifying HTML files in a Node.js environment with the fs module

Struggling with learning node.js and back-end development, I encountered a problem that I can't solve. Can anyone lend a hand? I've been working on changing my HTML page from h1.html to h2.html, but I keep encountering the following error: (Error ...

javascripthtmlnode.jswebbackend

What is the best way to line up my columns when they are split between groups of three and two?

I am having trouble aligning my columns in the way I want. The image shows that some tables have 3 columns while others have 2, and I would like to align the blue with the blue and the red with the red as shown in the picture: https://i.stack.imgur.com/1bL ...

htmlcsshtml-table

How to disable event.preventDefault on a hyperlink with a delay using jQuery or JavaScript

I need to disable event.preventDefault after a certain period of time on a hyperlink using jQuery or JavaScript. When I click on the link, it should redirect me to the specified href link after a delay because I need to send an AJAX request during that tim ...

javascriptjqueryhtmlsettimeout

Send form information using AJAX response

I have successfully implemented a feature where I load an iframe into a div with the id of #output using AJAX. This allows me to play videos on my website. jQuery( document ).ready( function( $ ) { $( '.play_next' ).on('click', fun ...

javascriptjqueryhtmlajaxforms

modifying variable values does not impact what is displayed on the screen

I'm currently facing an issue with AngularJS. I have two HTML blocks within an ng-repeat and I need to display one of them at each step. <div class="col-md-3" style="margin-top:80px" ng-init="checkFunction()"> <div id="left_group_stage"& ...

javascripthtmlangularjs

What is the best way to eliminate alternative styling from a chart component in C#.NET?

I've encountered an issue with a stacked chart component on a c#.net webform from the MS Chart Control Library. Initially, I dragged the control onto the design surface and then proceeded to edit the source html (.aspx page) to assign the element a cs ...

asp.netcss

Issues with the responsiveness of Bootstrap 4.5.0 grid system

While following a Django tutorial, I encountered an issue with Bootstrap cards and CSS styling. Using the latest version (Bootstrap 4.5.0), I noticed that my responsive grid was causing the cards to overlap as I increased the screen size. Comparing it to t ...

htmlcssdjangotwitter-bootstrapbootstrap-4

What is the best way to position a div vertically on the right side of another div?

I've been experimenting with different padding and margins to try and position the div below the dotted div. My goal is to have the div that's currently at the bottom appear vertically aligned to the right of the other div, similar to the layout ...

htmlcssbootstrap-4

Implement a custom placeholder feature for InputNumber in Blazor

I have a question about adding a placeholder to the InputNumber component. I attempted the following code but unfortunately, it did not work as expected. //Code behind public int? Hour { get; set; } //razor page <EditForm Model=&quo ...

c#htmlblazor

Problem with Labels Overlapping and Blocking Text Fields

My issue is that when I interact with the text field, the label "Type your New Task here" moves up and gets covered by what looks like a white overlay. How can I fix this so that the label stays visible at all times? Prior to engagement: https://i.stack.i ...

cssreactjsmaterial-uilabeloverlay

Is it feasible to add a row in bold font following every set of 10 rows written in regular text?

Looking for a way to implement pagination on a table with dynamic headers? I am using rows with font-weight:bold to act as headers for the pagination. Is it possible to insert a row with font-weight:bold every 10 rows? I am unsure of how to achieve this, ...

htmljqueryjsonasp.net-mvc

HTML code that has been "commented out" means

Within my _Layout.cshtml file, the following lines are present: <!--[if IE 7]> <link rel="stylesheet" type="text/css" media="all" href="/Content/css/ie7.css" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="te ...

c#javascript.nethtml

JavaScript not functioning properly within HTML

Recently, I've been experimenting with creating a pie chart using Google's JavaScript function. Surprisingly, it worked perfectly when I tested it on a fiddle: [http://jsfiddle.net/qb8av4td/](http://jsfiddle.net/qb8av4td/). However, when I tried ...

javascripthtml