Creating a unique collapsible navbar in Bootstrap 4 with a contrasting color scheme from the main navbar

I'm currently using Bootstrap4 and I am trying to implement a collapsible menu on mobile that spans the full width of the screen and has a different background color compared to my navbar.

Initially, I applied a background color to the navbar-collapse element, which worked fine. However, the issue arises when the navbar has padding because this padding also affects the collapsible menu. If I try to override the padding of the navbar class, it causes misalignment between the brand logo and the burger menu icon.

Below is the code snippet I am working with:

<nav class="navbar bg-light navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
  <div class="container"> 
    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span></button>
    <div class="navbar-collapse collapse show" id="collapseCoreNav" style="">
      <ul class="navbar-nav ml-auto">       
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
        </li>
       </ul>
    </div>
  </div>
</nav>

Is there a way to achieve this desired layout without having to modify the CSS extensively?

cssbootstrap-4

Answer №1

If you want to achieve this effect, avoid using the default bg-light class as it has !important applied...

Is there a way we can implement this with a simple media query?

Here is a working snippet:

nav {
  background-color: lightpink
}

@media screen and (max-width:595px) {
  nav {
    background-color: lightgreen
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<nav class="navbar  navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
  <div class="container">
    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span></button>
    <div class="navbar-collapse collapse show" id="collapseCoreNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<s

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

Guide individuals towards two distinct web addresses depending on the information provided

I am currently working on a website for my upcoming wedding, which consists of 2 separate events with different sets of information regarding when and where they will take place. I would like to create a system where users can input some kind of prompt, su ...

javascriptjqueryhtmlcss

Allowing the contenteditable attribute to function only on a single line of

My app allows users to create different lists, with the ability to edit the name. However, I am facing an issue where if a user types a new name, it should remain on only one line. I tried adding max height and overflow hidden properties, but it only hides ...

javascriptcsshtmlmarkup

What is the best way to ensure that my pictures are only visible within a modal box?

I've set up a modal box called sectors with two subcategories: publication and food. Each subcategory is linked to a div that contains an image. My goal is to hide the image inside the modal box and display it on the screen once the box is closed. ...

javascriptjqueryhtmlcss

Explanation for aligning anchors within an HTML <div>

I'm faced with this HTML snippet: <div class="row"> <div class="col-md-10 social-icons"> <a href="https://www.youtube.com/" target="_blank"><img src="/images/youtube-i.png"></a> <a href="https://gi ...

htmlcss

Crop the left side of an image instead of the right side to reduce its width

I have a photo that I'm working with. Currently, I am looking to add a progress bar effect where the picture starts off very short and gradually becomes longer. As of now, I have set the image as a background in a div. However, when I set a specific ...

jqueryhtmlcssweb

js The correct value is not being set to the div's style.top

function gamestart(){ var gr; var gr = true; console.log(gr==true); if(gr == true){ console.log("we have activated pointer key detection dear Mr.ketsebaot") document.onkeydown = checkk; } } function checkk(e){ cons ...

javascripthtmlcss

Is it still considered unwise to use tables for layout purposes?

After spending four frustrating hours attempting to vertically align text without resorting to tables, I had to throw in the towel. I followed advice from a recommended solution on Stack Overflow, but my responsive layout requirements and complex CSS stru ...

htmlcss

My webpage lacks responsiveness

I've recently put together an HTML page, but unfortunately, it's not responsive. My Code <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> ...

htmlcss

Mastering smooth zoom and scroll effects in JavaScript without any flickering

My web application has a zoom feature that scales some absolutely positioned DIVs while keeping the scroll position intact. However, during the animated zooming, there is a noticeable flickering effect where the boxes seem to jump up and down slightly. I a ...

javascripthtmlcss

The modal-body class is currently displaying only the initial object of the Django model 'hostels'

Why is the value inside the class modal-body only showing the first object of the Django model 'hostels'? When 'edit' in this code is replaced with {{hostel.hostel_name}}, it works fine. What could be causing the issue? {% for hostel i ...

jquerydjangodjango-modelsbootstrap-4django-views

Tips for sending information to a Bootstrap modal

I am working on an Angular 6 SPA app where I have a table populated with elements of type "quote" using *ngFor. In each row, there is a delete button to remove that element. However, I want to incorporate a confirmation dialog that references the specifi ...

angularbootstrap-4

Create an additional column in HTML using Bootstrap styling

I am currently working on a CRUD form (using PHPMyAdmin for the database), developed in HTML, JavaScript, and PHP. The queries are executed using jQuery. I am facing an issue with my code - whenever I add a new column to my table, the formatting gets messe ...

javascriptphphtmlbootstrap-4datatable

instantaneous javascript computations

Click the link below to view the code. Currently, the issue I am facing is that the bottom three sets of checkboxes are not performing the correct calculations and do not update when they are unchecked. Visit Code $('input[name=food]').change(f ...

javascriptjqueryhtmlcss

Import CSS and JS files into a Node.js project

I've been diving into Node.js and I've hit a roadblock. I'm facing an issue with loading css and js files in my project. Despite successfully rendering Bootstrap and Fontawesome from a CDN, my custom css and js files refuse to load. This is ...

htmlcssnode.js

Using Accordions in Jquery to dynamically adjust page height during ajax calls

I am currently using AJAX to call in a page and animate its height successfully. However, I have encountered an issue with an accordion-like function that is supposed to toggle the visibility of an element and adjust the height of the containing element ac ...

javascriptjqueryhtmlcssajax

Embed shapes inside the margins of an HTML container

I'm aiming to create something unique by placing the circle and triangle on the borders of an HTML block. https://i.sstatic.net/MVYuc.png Below is the CSS code for my block: .block { color: red; } .cercle { border-radius: 50%; } .triang ...

htmlcss

Center the HTML elements on the page

After struggling for some time, I can't seem to figure out how to center elements in the middle of a page without having a lengthy navigation bar at the bottom of the screen. Does anyone have any suggestions? https://codepen.io/picklemyrickle/pen/XWj ...

htmlcsselementcentering

How can I turn off automatic ellipsis on my IOS device?

Currently, I am working on a web application that involves displaying location descriptions retrieved from an API. The issue I am encountering is that the description is being cut off with an ellipsis after a certain number of lines when viewed on an iPhon ...

htmlcssiostypescriptionic-framework

Creating a circle div with an image or text in the center that is responsive can be

Striving to design a responsive circle that adapts to all screen sizes, similar to this: I experimented with multiple codes, yet none of them met the specified criteria efficiently. ...

htmlcssresponsive-designcss-shapes

"Enhancing Your Web Pages: Generating and Inserting HTML Elements on the Fly Using

For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...

htmlangularbootstrap-4