Complete Navigation Bar Expands Alongside Drop-down Menu

For my navbar, I am attempting to set a custom breakpoint at 1080px where it switches to a hamburger menu. However, when I click on a dropdown option, the entire navbar expands instead of just the dropdown area.

@media (min-width: 1080px){
.navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
    flex-direction: row;
}
.navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
}
.navbar-expand-custom .navbar-collapse {
    display: flex!important;
}
.navbar-expand-custom .navbar-toggler {
    display: none;
}
}

HTML

<!-- Start of Navbar -->
<nav class="navbar navbar sticky-top navbar-toggler navbar-dark bg-dark navbar-expand-custom">
   <a class="navbar-brand" href="#">
   <img src="images/lone-eagle-flying-school-CLIFTON-white.png" height="130" alt="">
   </a>
   <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>
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mx-auto">
         <li class="nav-item active">
            <a class="nav-link nav nav-collapsed" href="index.html">Home <span class="sr-only">(current)</span></a>
         </li>
         ...
         ... (truncated for brevity)
         ... </li>
      </ul>
   </div>
</nav>

Using .navbar-expand-lg works fine, but switching to .navbar-expand-custom causes issues with how the navbar behaves after clicking a dropdown option. The custom breakpoint, however, functions correctly.

Answer №1

Here is a useful code snippet that addresses your concerns. The issue revolves around setting the dropdown to take up space below 1080px while making it absolute above that threshold, ensuring that the navbar doesn't expand beyond its intended boundaries.

@media (min-width: 1080px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }
  .navbar-expand-custom .navbar-collapse {
    display: flex!important;
  }
  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
  .navbar-expand-custom .navbar-nav .dropdown-menu {
    position:absolute;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Start of Navbar -->
<nav class="navbar navbar sticky-top navbar-toggler navbar-dark bg-dark navbar-expand-custom">
  <a class="navbar-brand" href="#">
    <img src="images/lone-eagle-flying-school-CLIFTON-white.png" height="130" alt="">
  </a>
  // Rest of the HTML content...

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

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

Incorporating navigation controls into a modal window

I have successfully created a sign-in modal, but now I'm looking to include buttons at the top. One button should redirect users to register/sign up, and the other button should lead them back to the sign-in modal, as shown in the image I've link ...

Utilizing jQuery to apply a class to a targeted element when clicked

I'm currently working on animating a menu item where it expands to the left when hovered over, and contracts back when the mouse moves out. This part is functioning as expected. Additionally, I am trying to apply a specific color to the button by add ...

Learn how to dynamically disable a button based on the input state matching an email pattern!

I'm facing an issue with my login form that has 2 input fields and a login button. One of the input fields requires a valid email pattern. If any of the input fields are left empty, the login button becomes disabled. However, when an incorrect email p ...

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

There was a problem compiling the template and an error occurred in the mounted hook

I am encountering a slight issue with testing Vuejs and I am unsure how to resolve the error. Error1: "[Vue warn]: Error compiling template: Component template should contain only one root element. If you are using v-if on multiple elements, use v-e ...

Ensuring that links are functional across all directory levels: a comprehensive guide

Looking at the image included here, you can see a preview of the website I'm currently building. The plan is to have individual pages for each machine in the company's lineup. Since the navigation bar and menu will be consistent across the entire ...

Creating a seamless vertical navigation that connects the top banner with the bottom footer section

Having some difficulties with my current assignment. Any assistance would be greatly appreciated, whether it's a minor error I've overlooked or if I'm completely off-base with my code. The main challenges I'm facing involve getting my ...

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

Struggling to align images side by side using HTML and CSS along with figcaption and buttons

Adding buttons below images on my webpage is proving to be a bit challenging. I tried using the figcaption tag, but it resulted in the images stacking on top of each other instead of side by side. **My HTML:** <section class="mostpurch"> ...

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

Obtain ID and Class details from an HTML webpage using VBA

A few months back, I developed a program in Excel VBA to extract specific information about the prices of my game collection from an HTML page. Initially, it worked perfectly fine but suddenly stopped functioning about a month ago. I'm struggling to f ...

Encountering a SyntaxError: Unexpected token < in the initial position of JSON during JSON parsing within Node.js

const express = require("express"); const bodyParser = require("body-parser"); const request = require("request"); const https = require("https") ; const app = express(); // store static files (e.g css,image files) ...

Enhance the standard input control in Vue.js by extending it to include features such as

Incorporating vue.js: Can you enhance a standard HTML input without the need for a wrapper element? I am interested in customizing a textarea like so: Vue.component('custom-textarea', { data () => { return { } }, template: &apo ...

What is the most effective method for integrating a hosted React application into a website that is not built using React?

I currently have a complete React application hosted on AWS that I want to embed into another non-React site. Right now, I have it embedded using an iframe and it's working well. <!doctype html> <html lang="en> <head> <meta c ...

Angular select automatically saves the selected option when navigating between views

I would like the selected option in my dropdown menu to stay selected as I navigate through different views and then return back. Here is the view: <select ng-model="selectedSeason" class="form-control" ng-options="season as 'Season '+ seas ...

The elements from base.html and the extended page are now placed on separate rows rather than on the same row

I'm relatively new to HTML, Jinja, and CSS and have been playing around with creating a webpage that retrieves data from a sqlite3 database. As of now, I am facing some challenges regarding formatting. To assist with table formatting and overall aest ...

transferring a JavaScript variable to PHP upon submitting a form

This question arises after my previous inquiry on the topic of counting the rows in an HTML table using PHP. Since I didn't find a solution that worked for me, I am exploring new methods but struggling with the implementation. My approach involves ass ...

I am having trouble getting any value back from my POST request using HTML, Node.js, and Express

I've been attempting to make a simple post request from an HTML page, but when I check the console after the post, it doesn't return anything. I'm confident that I have correctly set up the body parser on the server side. Could there be some ...