Positioning a button in the top right corner with Bootstrap 4

For a header design, I need to position the language selector in the top right corner and have a logo image on the left side. Below these elements, there should be a row of links that spans the entire width.

Normally, this setup would work fine, but when the header collapses, the language selector ends up in the collapsed menu.

To ensure that the links and the language selector stay together even when the header collapses, they must be placed within the 

<nav class="nav-bar navbar-expand-md">
.

However, due to this arrangement, the selector is always in the wrong position on larger screens.

So far, I haven't found a way to properly position the language button without causing issues with the collapse menu.

If any Bootstrap expert could provide some guidance on this issue, it would be greatly appreciated.

Here is a picture for reference: https://i.sstatic.net/A9DTw.png

And here is a link to a working fiddle

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Revise the structure of your HTML code. Ensure that the <nav> element is directly wrapping the menu items, specifically #main-nav.

To achieve this, simply relocate the col-lg-4 column adjacent to the preceding col-lg-8 column.


    <div class="row">
      <div class="col-lg-8 col-md-8">
        <strong class="logo"><a href="#"></a></strong>
      </div>
      <div class="col-lg-4 col-md-4">
        <div class="tools">
          <div class="lang">
            <a href="#" data-toggle="dropdown" class="btn btn-default btn-select">English</a>
            <ul class="dropdown-menu ">
              <li class="dropdown-item"><a href="#">English</a>
              </li>
              <li class="dropdown-item"><a href="#">spanish</a>
              </li>
            </ul>
          </div>
          <!-- lang -->
        </div>
        <!-- tools -->
      </div>
      <nav class="nav-bar navbar-expand-md">
        <ul id="main-nav" class="collapse navbar-collapse" id="navDrop">
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Page</a>
          </li>
          <li><a href="#">Page</a>
          </li>
          <li><a href="#">Page</a>
          </li>
          <li><a href="#">Page</a>
          </li>
          <li><a href="#">Page</a>
          </li>
          <li><a href="#">Page</a>
          </li>
          <li><a href="#">Page</a>
          </li>
        </ul>
      </nav>

      <!-- nav-bar --><span class=" hamburger ml-auto mr-3 btn-menu d-block collapse navbar-collapse" data-target="#navDrop"><span>menu</span></span>
    </div>

Answer №2

If you want to achieve the desired layout, move the `

` inside your row and add the classes `d-flex align-items-center` to your `row` for a nice centered layout.

Consider using the `navbar-toggler` for your hamburger menu on larger screens.

The typical styling for a hamburger menu looks like this:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

For further information, refer to: https://getbootstrap.com/docs/4.3/components/navbar/

$('.btn-menu').on('click', function(e) {
  if (!$('html').hasClass('push')) {
    $('html').addClass('push');

  } else {
    $('html').removeClass('push');

  };

  e.preventDefault();
});
*CSS styling code included*
*JavaScript libraries included*

Answer №3

Here is the updated version of your jsFiddle:

You can view it in action here

I made some changes by adding the following CSS properties:

<div class="row" style="margin: 36px 0 0;position: relative;">

and also:

<div class="col-lg-12 col-md-12" style="position: absolute;top: 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

PHP/JQuery Validation Form Techniques

I am exploring ways to create a form with validation and data insertion into a MySQL database. Would creating the form in HTML, validating it using jQuery, and then submitting the data via PHP's post method be the optimal approach for this task? If a ...

phpjquerymysql

Discovering similar values between two attributes through jQuery

For the scenario outlined here, a variable is being used to load ajax content. var postname = itsname; The goal is to retrieve the value of data-slider by matching it with the data-postname attribute using jQuery. In this case, the desired result is 2 in ...

jqueryattributes

How to seamlessly integrate partialViews into a dashboard when transitioning from bootstrap 3 to bootstrap 4

After modifying all the elements on my dashboard to match a bootstrap site example, I noticed that my partial views were opening below the admin screen components. Screenshot: https://i.sstatic.net/im1J7.png <nav class="navbar navbar-dark fixed-top b ...

asp.net-mvctwitter-bootstrapbootstrap-4

What causes the variation in size between the next/image and img HTML elements?

Two Images, Different Sizes! https://i.sstatic.net/vpoNG.jpg There seems to be a discrepancy in size between the image rendered by the next/img component and the one displayed using the img element. Interestingly, they both use the same image source and ar ...

javascriptcssreactjsnext.js

Is it beneficial to incorporate AJAX functionality into my PHP classes and scripts?

I recently started working on a PHP/AJAX website and I'm contemplating the best approach to "only include the content". Should I incorporate if statements in my header and footer scripts to check for a "ContentOnly" get parameter? Then, append that p ...

phpajaxjqueryhtml

Craft unique looks for both even and odd Tumblr posts

I recently came up with a unique idea for a Tumblr theme where the design of posts changes based on whether they are even or odd in the sequence. While I have experience with basic HTML coding, delving into Tumblr customization is new to me. Here's wh ...

htmlcsstumblr

How to give distinct DOM ids to multiple Yii EJuiAutoCompleteFkField widgets showcased on one page?

Is there a way to assign unique DOM IDs to multiple EJuiAutoCompleteFkField widgets within a single view so they can function separately? Currently, only the first widget works because it's not unique. I was hoping for something like 'htmloptio ...

jqueryautocompleteyii

I attempted to implement the hover effect on a custom Tailwind CSS class I created, but unfortunately, it does not appear to be functioning as expected

For example: .btn {bg-blue-500 text-2 text-orange-300} .btn2 {bg-orange-500 text-2 text-blue-300} Attempted Solution: Edit: Apologies for the oversight in not including the code I was working with... it was late at night. < button className="btn ...

cssnext.jshovertailwind-css

Avoid activating modal after close button is clicked

I have created a modal that pops up every time the page loads. How can I modify it so that it does not appear again once the user clicks on the close button? Thank you in advance. Here is my modal code: <div class='modal' id='modal&apo ...

phpjquerymodal-dialogpopup

Personalize the HTML <input> tag using the attribute type="file"

Within the React site, there is a field where users can select a file from their computer and view the file path. To achieve this functionality, I used an HTML input with type="file"... <div className="inline-flex w-full justify-between&q ...

htmlcssreactjsinputtailwind-css

What sets apart a .class element from element.class in CSS?

I was browsing through this tutorial http://www.w3schools.com/css/tryit.asp?filename=trycss_nesting and noticed a confusing point. Why did they use .marked p instead of p.marked? When I tried changing it to p.marked, the text didn't turn white as expe ...

htmlcss

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Utilizing the jquery.uploadfile.min.js plugin to upload multiple files results in creating a div of jscrollpane class each time a file is uploaded. However, there seems to be an issue where only the scrollbars in the last created div are functioning proper ...

javascriptjqueryhtmljscrollpane

What steps should be followed in order to write this piece of JavaScript

Upon viewing this post, you will notice an "add comment" link below it. Clicking on this link will add a textarea for users to input their comments. I am curious about how I can implement a similar function? Update: Thank you all for your assistance. I ...

jquery

Adjust the image size to fit the page according to its height

Having a dilemma here. I have this square image (2048x2048) that I want to set as a background. The tricky part is, I want it to display borders when the page stretches into widescreen mode, but also resize while maintaining its square shape when the page ...

htmlcssimageresize

Issues with font rendering on Firefox making it difficult to read

Our website's Wordpress theme utilizes the font Montserrat, which is properly displayed in Chrome, IE, and Safari, but is experiencing issues in Firefox. Below is the CSS styling for the font: @font-face { font-family: 'montserratbold'; ...

cssfirefoxfonts

Update the table with information from a designated URL every 5 seconds

So here's the situation: I've got a dynamic HTML table <table id="example"></table>. The data displayed in this table changes according to the URL. Normally, my default URL looks like this: index.php?action=add To handle this, I&a ...

javascriptphpjqueryhtmlajax

Display or conceal a division underneath a dropdown menu based on selections retrieved from a SQL Server database

Presented here is my JavaScript code. function appendItemforPurchaseOrder() { debugger var rowNumber = parseInt($(".itemmapContainer").attr("data-rownumber")); rowNumber = isNaN(rowNumber) ? 1 : rowNumber + 1; var addNewItemDetailHtml = ...

javascripthtmlcssasp.net-mvcvisual-studio-2017

The HTML input element does not comply with the specified pattern

My current struggle lies in validating the input field for a "Phone Number". Despite creating a regex pattern that demands 10 numbers, I still encounter the error message: "Please match the requested format". I am puzzled as to why this is happening, even ...

htmlformsvalidationinput

What is the best way to retrieve and utilize various data from a JSON object? Is creating an array necessary for this task?

As a novice, I am currently utilizing $.get to fetch data from a REST API, the JSON response looks like this: [{"id":"1","url":"http:\/\/123.456.78.910\/workforce\/images\/item1.jpg","price":"99","description":"Mobile Phone"}, ...

javascriptjqueryjsonrest

Updating the image source while refreshing the AJAX variable

This code snippet returns either a 0 or 1 value within the #durum div. However, I am looking to utilize this value to display an image that changes based on the value. For instance, if the ajax call returns 1, it should show 1.jpg and if it returns 0, it ...

jqueryajax