Center button vertically in the navigation bar

I'm working on a website utilizing the Twitter-Boostrap framework and I want to position a navbar-toggle button on the right side of the navigation bar, perfectly centered.

Is there a way to achieve this?

This is what I have attempted so far:

https://i.sstatic.net/DAyjx.jpg

.navbar-default .container {
  position: relative;
}
.navbar-default .navbar-toggle {
  background-color: #2E8B57;
  border: 5px solid #FFFFFF;
  box-shadow: 1px 1px 1.5px #FFFFFF;
  padding: 8px 10px 8px 10px;
  position: absolute;
  right: 0;
  top: 13px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!--Container-->
    <div class="navbar-header">
      <div class="navbar-brand">
        <a href="index.html">Food, LLC</a>
      </div>
    </div>
    <!--END Navbar-header -->


    <!-- Toggle Button -->
    <button type="button" class="navbar-toggle collapsed visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>
  <!-- End Container -->
</nav>
<!-- End Navigation -->

htmlcsstwitter-bootstrap-3css-position

Answer №1

To achieve better positioning, consider using top: 50% in combination with transform: translateY(-50%) instead of top: 13px;. Below is an example snippet:

.navbar-default .container {
  position: relative;
}
.navbar-default .navbar-toggle {
  background-color: #2E8B57;
  border: 5px solid #FFFFFF;
  box-shadow: 1px 1px 1.5px #FFFFFF;
  padding: 8px 10px 8px 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!--Container-->
    <div class="navbar-header">
      <div class="navbar-brand">
        <a href="index.html">Food, LLC</a>
      </div>
    </div>
    <!--END Navbar-header -->


    <!-- Toggle Button -->
    <button type="button" class="navbar-toggle collapsed visible-xs" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>
  <!-- End Container -->
</nav>
<!-- End Navigation -->

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

Implementing a dropdown menu within a Bootstrap navbar

Currently, I am working on developing a website and decided to kickstart the project by using the dashboard example provided on the Bootstrap website. However, I encountered an issue when trying to integrate a dropdown into the navbar. It seems that the dr ...

csstwitter-bootstrapbootstrap-4

Issues with Bootstrap tabs not updating content

I have been working on incorporating bootstrap tabs into one of our pages. I followed the example provided at https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior, but unfortunately, the tabs are not functioning correctly (they appear as ...

javascripthtmltwitter-bootstrapbootstrap-4

Running a method at any given time within an ngFor loop in Angular 5

On my angular page, I am facing a challenge with updating a variable and displaying it in the HTML within an *ngFor loop. Here is an example of what I need: HTML: <table *ngFor="let data of Dataset"> somehowRunThis(data) <div>{{meth ...

htmlangulartypescript

JavaScript snap.js button

I'm looking to implement a Toggle button with snap.js from the following source: https://github.com/jakiestfu/Snap.js. The usage instructions on the website are quite concise and I'm struggling to grasp them. Below is the code I've put toget ...

javascriptjqueryhtmlcss

the content outside of the division is incorrectly formatted

Here is the code snippet that I am working with: <html lang='es'> <head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.mi ...

htmlcss

What is the best way to align the sidemenu in the left so that it is vertically centered

I need assistance centering this side menu vertically on the left side. Any suggestions, possibly involving flex display? #side-menu { background-color: white; position: absolute; right: -40px; border-radius: 25px; padding: 10px; padding-right: 30px; margi ...

htmlcssvue.js

What are some ways to enhance the worth of this.value?

What's the best way to restrict input to only numeric values in this scenario? function validateUserInput() { $('datagroup').on('keyup', 'input[id^="datagroup_1"]', function () { if (!this.value){ ...

javascripthtmlkeyup

Instructions on converting text to a Float value and displaying the calculated result in a separate div

I am attempting to extract a string from a div, clear its content, then retrieve the actual price from ".skuBestPrice", remove any special characters, perform calculations to convert it into a floating point number, and display this number in the div ".tot ...

javascripthtmljquery

Creating a CSS key animation for resizing an image: What is the correct way to make an image expand and contract

Check out this CSS key animation example: http://jsfiddle.net/ryurage/Q2ELp/ I'm attempting to make an image grow and occupy most of the window when triggered by user interaction like hovering or click-and-hold. Subsequently, I want the image to shr ...

jquerycsscss-animations

Deciphering the sequence of operations in a CSS style sheet

Review the CSS stylesheet below: #start_experiment_button { display: inline-block; color: black; border: 3px outset gray; background-color: #CCCCCC; padding: 8px; text-decoration: none; font-family: Arial, Helvetica; font-weight: bol ...

css

The dropdown navigation bar on my Django/Bootstrap 4 site functions perfectly on all pages except for the homepage

I recently encountered an issue with a dropdown menu on my website that's been driving me crazy. Initially, the dropdown menu only worked on every page except the homepage. It took me a while to figure out that I hadn't included the link to the B ...

javascripthtmlcssdjangobootstrap-4

What is the best way to maintain two distinct background effects that each require different pixel sizes?

I am attempting to create a gradient that goes from the top-right corner to the bottom-left corner, and I also want to add a grid of dots. However, the method I am using to create the grid of dots is through a radial gradient which requires a small backgro ...

htmlcssbackground

AngularJS is not properly clearing the datepicker

Upon submitting the form, I have managed to reset all input fields to blank except for the datepicker which still retains the previously selected date. How can I clear that as well? Snippet of HTML: <div> <form name="profileform" role="fo ...

javascriptjqueryhtmlangularjsdatepicker

When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...

javascripthtmlcsscss-animations

The fixed position with bottom at 0 is not displayed on the Chrome browser until a refresh is done

When accessing my React front end in Mobile Chrome browsers, I noticed that the div at the bottom only renders after moving or refreshing the page. Interestingly, it works perfectly fine once cached. However, on the initial load (especially when using inco ...

cssreactjsnode.jstypescriptvite

Managing Input Type Dropdown Selections Using Jquery

I am currently in the process of developing a website. On this website, there is a form that includes 3 dropdown menus as shown below. I would like to implement a feature where selecting the number 5 from the Adults menu will automatically display 5 in the ...

javascriptjqueryhtml

Display the content of each div separately on different pages

Whenever the user clicks on the export button, I am exporting the data stored inside the div to a PDF. My goal is to display each div content on individual pages within the PDF. The functionality described above works perfectly in the demo available at th ...

javascripthtml

What is causing the HTML sub menu to appear in the incorrect position?

I'm working on an HTML and CSS menu. I'm trying to center the sub-menu relative to the main menu (ul.menu). Why is there extra space appearing on the left side? The styling for ul.menu li:hover ul already sets left: 0, and its closest parent i ...

htmlcssmenu

Are current web browsers able to block the code "<a href="javascript:window.open....?

I am looking to create a pop-up window for sharing on Facebook. The best way to achieve this is by using javascript to pop up a small window with a width of 400 pixels and a height of 200 pixels. Will pop-up blockers in Chrome, IE, or Google block this f ...

javascripthtmlcssbrowser

Is it possible to adjust the width of a parent element based on the number of child

In this particular example, I have structured a header with a logo-container positioned on the left side, a menu in the center, and a button on the right. The menu consists of 5 top-level items and 2 sub-menus. <div class="container"> <div cla ...

javascriptjqueryhtmlcss