Ways to resolve navbar toggler issue in Bootstrap 4

My problem lies in creating a responsive navbar using bootstrap. On smaller screens, the toggler in the navbar ends up overlapping the logo instead of aligning to the left. I've attempted to add containers around the elements to fix this issue but to no avail.

Here is the code snippet:

<div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>Menu
      </button>
  <img src="images/irgLogo.jpg" class="mt-1 ml-4 img-fluid">

  <div class="collapse navbar-collapse" id="navbarResponsive">
      /* Navbar links go here */
  </div>
</div>

You can visit //candlewoodlakelifestyle.com/irg to see the problem in action. Any help or advice on how to position the toggler correctly would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

Are you in search of something similar to the content below or a more traditional option?

My recommendation is to avoid placing the navigation inside a container. If necessary, opt for a fluid container:

.nav-item {
  color: #fff;
  text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>Menu
          </button>
    <img src="images/irgLogo.jpg" class="mt-1 ml-4 img-fluid">

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="">Home</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="IRG Listings">IRG Listings</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Property Search ">Property Search</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Communities on Candlewood Lake">Agents</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Buyer Resources">Buying</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Seller Resources">Selling</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Contact Independent Realty Group">Contact</a><span class="hidden-md"><br></span>
    </div>
  </nav>
</div>

Improved version:

.nav-item {
  color: #fff;
  text-decoration: none;
}

.logo { color: #fff; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>Menu
          </button>

  <div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
    <a href="#" class="logo"><svg class="d-block" width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg></a>
    <span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="">Home</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="IRG Listings">IRG Listings</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Property Search ">Property Search</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Communities on Candlewood Lake">Agents</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Buyer Resources">Buying</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Seller Resources">Selling</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Contact Independent Realty Group">Contact</a><span class="hidden-md"><br></span>
  </div>
</nav>

Answer №2

Simply delete the word 'Menu' from the button.

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

An extra space is appearing on the right side of the button due to the white color setting which makes it hard to notice initially.

I have included some screenshots for reference:

https://i.sstatic.net/21X2h.png https://i.sstatic.net/9H1yX.png

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

Fill a dropdown menu with options from a JSON object, arranging them in ascending order

I have a JSON hash that I am using to populate a combo box with the following code: $.each(json_hash, function(key, value) { $("#select").append("<option value='" + key + "'>" + value + "</option>"); }); The functionality w ...

javascriptjqueryhtmljsoncombobox

Choose an Option that Does Not Allow PHP as a Value

Currently, I am retrieving a value from the database where interval days are set to 5. However, when I display it, it always shows '0' within my option form. <?php $interval_day = $this->crud_model->auto_order_interval_day(); ?> ...

phphtml

Style your index with a Wordpress plugin

I've been attempting to modify a plugin's stylesheet, but I'm having trouble locating the CSS file that contains the necessary styles. Despite Chrome's developer tool indicating that it is styled directly on the index site, I have searc ...

phpcsswordpresspluginsstyles

The bootstrap down button refuses to function despite having all the necessary files integrated

My bootstrap drop down button isn't functioning correctly even after ensuring all necessary javascript and popper libraries are included as per npm download. <!DOCTYPE html> <html lang="en"> <head> <title>three grid </title ...

javascripthtmljquerycsstwitter-bootstrap

Image floated to the left, text aligned in the center. Following the image, the links are not aligned

UPDATED: I recently made some adjustments to my webpage layout. There is an image at the top of the page that is floated left, and next to it, there is a list of links centered with text-align: center. However, the last link is centered within the div but ...

htmlcssimagecss-float

The server's response contained a MIME type of "application/octet-stream" that did not include JavaScript. Module scripts in HTML are subject to strict MIME type checking

Here is the structure of my project: node_modules server.js public: glsl: fragment.glsl vertex.glsl index.html main.js img.jpg style.css I have set up a simple server to serve a three.js animation in server.js const express = require('expre ...

javascripthtmlnode.jsexpressthree.js

Using the <br /> HTML tag may face cross-browser compatibility issues

Having some trouble with the HTML <br /> tag. I'm trying to stack 2 images on top of each other. When there is no <br /> between them, the bottom border of the top image touches the top border of the bottom image, which seems correct. Ho ...

htmltags

Rearrange the middle column to be the top column on smaller screens

I am trying to create a layout with 3 columns in a row. The challenge is to prioritize the middle column on top when viewed on small screens, with the left and right columns below it. To clarify, on large screens the order should be 1 2 3, while on small s ...

csstwitter-bootstrap

Challenges with Adjusting Background Opacity in CSS

My text has a white background with an opacity of .3, but it's affecting the foreground due to CSS repositioning. Even though the HTML is in a different division, I struggle with certain aspects of CSS and would appreciate guidance from those more exp ...

cssbackgroundbackground-color

Tips for displaying a message in a concealed field with jQuery

I have an input field that saves values for checking a specific condition. When the condition is false, I want to display a message. If the field is hidden, the message will not be displayed. HTML <input type="hidden" id="year1_req_fund_hidden" name= ...

javascriptphpjqueryhtml

What is the best way to conceal overflowing text with ellipsis by utilizing dynamic Bootstrap columns?

I'm having trouble aligning a text alongside an icon within a card. The card is enclosed in the Bootstrap "col" class, which dynamically adjusts its size based on the number of items in a row. When there isn't enough space, the text wraps and ap ...

htmlcsstwitter-bootstrapbootstrap-4

Fade and nivoSlider are the only transitions that are effective

I have noticed that only the fade effect is working on the nivoSlider. For more information, you can visit their official site here: According to their site, it should have a Dark Theme & Random Settings but all I see is the Fade effect. Has anyone else e ...

javascriptphpjquerycssnivo-slider

The HTML document is experiencing overflow within the body element

I am in the process of designing a website that consists of two main sections. The first section includes a video, a navigation bar, and some introductory text. The second section features an image and a lorem ipsum paragraph. However, these two parts are ...

htmlcssvideo

Manipulate component properties using CSS hover in React with Material-UI

I am attempting to modify the noWrap property of a Typography element when hovering over it. I have defined a custom CSS class for the parent element and the hover functionality is working correctly. However, I am unsure how to adjust the noWrap property u ...

javascriptcssreactjsmaterial-ui

What could be the reason my vue.js button is not generating a fresh textarea?

I am currently developing my first Web App with vue.js and I'm trying to implement a feature where clicking a button will generate a new textarea. It seemed to be functioning correctly when tested on jsfiddle, but once I tried running it in visual stu ...

javascripthtmlvue.js

Preventing an iframe from reloading when transferring it to a new parent using appendChild

I'm looking to relocate an iframe to a different parent element while maintaining the iframe's current state (including scroll position and any entered form data). Unfortunately, when I use appendChild() to move the iframe, it reloads and resets ...

javascripthtmliframe

What causes the footer to disappear in Rails with Bootstrap?

Within my application.html.erb file, my setup is pretty standard: <html class="h-100"> !head, title, scripts, styles, stylesheets removed for this example here on stackoverflow! <body class="d-flex flex-column h-100"> <!-- Dropdown St ...

htmlcssruby-on-railsbootstrap-4

Turn off automatic compilation for LESS styling

In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...

csseclipsemavenless

Searching for HTML table cells with JUnit and Selenium

Currently, I am running tests on a website using Selenium IDE that features a table. My objective is to confirm text in a table cell (row, column) through a CSS selector. The design of the HTML table is quite straightforward. Below is an excerpt from the t ...

htmltestingseleniumjunitcss-selectors

How can you insert content or advertisements into the HTML generated by a PHP server?

I'm currently utilizing Laravel and Vue.js in my project. Although it may seem like a simple query, I want to ensure that everything is working properly before moving forward. This involves... Utilizing a WYSIWYG editor to save content into an HTM ...

javascriptphpjqueryhtmllaravel