Center the collapse button in the Bootstrap 4 navbar

Is there a way to centrally position the collapse button on the navbar without knowing its height in advance? One potential solution could be:

.navbar-toggler {
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 40; /*adjust as needed*/
}

As a result, the button is vertically aligned. However, clicking on it expands the menu and causes it to center on the text, which may not be desired. Feel free to experiment with this concept here:

https://codepen.io/anon/pen/ZKbJJV

In addition, I am looking for a solution where the logo floats right when in "mobile view". Is there a way to achieve this without relying on media queries?

csstwitter-bootstrapbootstrap-4

Answer №1

I managed to make it work by enclosing the button and brand inside a div element like so:

<div class="d-flex align-items-center justify-content-between">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="SupportedContentaria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand ml-3" href="/en">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo" alt="logo">
  </a>
</div>

Afterward, I applied some CSS styles to the button as follows:

.navbar-toggler {
  align-self: inherit;
  position: initial;
}

And that pretty much resolved both issues for me!

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

Try employing an alternative angular controller when working with the bootstrap modal

I am trying to implement a bootstrap modal in my main HTML file, and I need some help on how to call another Angular controller for the modal. The button that triggers the modal is within a div that already has an Angular controller, and this is causing th ...

javascriptangularjstwitter-bootstrapbootstrap-modal

Issue with CSS not getting applied to content placed within modal dialog on Internet Explorer

After writing some code, I encountered a situation where I have multiple jQuery UI modal dialogs. I decided to remove the default title bar provided by jQuery in these modal dialogs. The code snippet I used within the create function in the dialog code to ...

jqueryhtmljquery-uicss

Adjusting the background color of two divs simultaneously

I'm trying to create a link that changes its background color when hovered over, but the issue is there are two child divs inside this parent div. When I move the mouse within the boundaries of the parent div, it's actually on a child div. This m ...

csshtmlhoveronmouseover

Series of HTML components. Button drifting to a different row

I am currently developing a project utilizing Bootstrap as the front end framework. Within this project, I have implemented a vertical scrollable card containing various items. Each row within the card consists of the following code: <p> <span> ...

htmlcssbootstrap-4

javascript Accumulated arrow management

Currently, I am in the process of developing a rating system. The system involves three hearts that change color when clicked, in an incremental manner (for example, if the second heart is clicked, both the first and second hearts will be colored; if the t ...

javascriptjqueryhtmlcss

Transform shorthand CSS font properties into their longhand equivalents

When dealing with a font CSS string like the examples below: font:italic bold 12px/30px Georgia, serif; or font:12px verdana; I aim to convert it into its longhand format which would be: font-style: italic; font-weight: bold; My initial attempt can b ...

phpcss

Limiting the width of the child UL within an LI element in a dropdown navigation menu

I am trying to find a way to limit the width of a <ul> tag within a dropdown menu in CSS to match the width of its parent <li> element without setting a fixed width. Despite my efforts, I have not been successful in achieving this and I am seek ...

cssdrop-down-menu

Mastering the Javascript ++ and += Operators

I'm struggling with a simple movement engine I created. When the Up key is pressed, a function moves a small div up, and when the Down key is pressed, it does the opposite. I suspect the issue lies with the += in the Down() function, as changing it to ...

javascriptjqueryhtmlcss

Utilizing consistent CSS styles across VueJS components

Currently tackling a VueJS 2 project and facing issues with scoped styling when cleaning up the code. My setup involves 3 components that share similarities, prompting me to utilize mixins for consolidating the code into one file. Each component makes use ...

cssvue.jsscopevuejs2mixins

What strategies can I use to ensure that the navigation bar is responsive when viewed on a

Check out my CSS file here for the navigation styling. See the screenshot of my HTML file showcasing the navigation panel here. I'm seeking assistance in making my navigation responsive on all mobile devices, as it is currently not functioning prope ...

htmlcssgithub

A guide on activating Effect in Div using just css

I have tried all the questions and answers related to this topic. Additionally, I attempted to solve related questions but was not successful. Please read my question thoroughly. What I Want: When I click on the click me Div, the second hiddendiv Div i ...

htmlcsstoggle

Issue with Bootstrap 3 grid and features not displaying correctly on IE11/Windows 8 platform

Link to the current page I am working on: The design of the page looks great when viewed in Firefox and Chrome. Please review the layout on Internet Explorer 11 when viewing on a desktop or laptop at full screen width. I am currently using Windows 8, but ...

javascriptjquerycsstwitter-bootstrap

Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...

cssnode.jsexpress

Mastering the art of aligning, centering, and positioning elements with Bootstrap

As I dive into learning Bootstrap, Javascript, React, and more to create responsive web pages, I find myself struggling with positioning elements in my projects. With properties like align, vertical centering, absolute and relative positions, flex, and a ...

cssbootstrap-4

Issues with Safari text shadow not rendering properly when extending beyond the element border

I've encountered a situation where I have a text shadow applied with the following CSS: body { background: white; } h1 { color: black; text-shadow: 100px 100px 10px black; } https://i.sstatic.net/j8OTS.png When viewing in Safari browser, t ...

csssafari

Exciting effects activated by hovering on a button

I'm attempting to create an animated effect by having a rectangle expand over the button when hovered by the user. However, I am unsure how to achieve this and have hit a roadblock. Here's what I want: There's a button. There's a rect ...

htmlcssanimationhovertransition

Issues with Materializecss sidenav functionality

Struggling to implement the sidenav with Materializecss. Check out the: MATERIALIZECSS SIDENAV DEMO MY CODEPEN https://codepen.io/gregoryksanders/pen/RxoyqB <head> <!--Import Google Icon Font--> <link href="https://fonts.googleap ...

javascripthtmlcssmaterial-designmaterialize

What is the best way to have a flexbox item occupy the available space and enable scrolling?

Trying to create a vertical scrollable div within the remaining space of various elements that do not have fixed heights. I currently have a flexbox element that adjusts to its content, but what I actually need is for the element to fill up the empty spac ...

javascriptjqueryhtmlcssflexbox

Display the results of database rows in a stylish card

I am currently working on displaying my database results in a bootstrap 4 card format, with each row result appearing in its own card. Previously, I was able to successfully show the results in a table format, but now I want to switch to displaying them i ...

phpbootstrap-4

The layout of webpages on Internet explorer 11 or IE 8 may appear differently than on Chrome or Mozilla

While coding a webpage using cshtml, I encountered an issue with a link pointing to a doc or pdf file in a Windows server location. In Windows Explorer, the file could be opened by clicking the link, but Chrome or Mozilla did not allow me to open the file ...

htmlcssinternet-explorergoogle-chromerazor