Did the menu get shifted downwards on the mobile version by using bootstrap?

Here is the desktop version of a navigation bar.

https://i.sstatic.net/e595L.png

This image shows the mobile version after clicking on the hamburger button.

https://i.sstatic.net/ng1tK.png

I would like the menu to open when I click on the hamburger, but if it doesn't get pushed down, it should open over the image.

.navbar-light .navbar-toggler {
        outline: none !important;
        padding-top: 8px;
        padding-bottom: 2px;
        z-index: 1001;
      }
      
      .navbar-toggler .navbar-toggler-icon {
        background-color: black;
        color: black;
        height: 3px;
        display: block;
        margin-bottom: 6px;
      }
<div class="container-fluid wow fadeIn">
        <nav class="navbar navbar-expand-md navbar-light bg-faded">
          <a class="navbar-brand wow fadeInLeft" href="#"><img src="img/logo.png" alt="logo" width="160px" height="60px"></a>
          <button aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
              <span class="navbar-toggler-icon"></span>
              <span class="navbar-toggler-icon"></span>
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto wow fadeInRight">
              <li class="nav-item active">
                <a class="nav-link" href="#"><strong>HOME </strong><span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><strong>ABOUT</strong></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><strong>SERVICES</strong></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><strong>PORTFOLIO</strong></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><strong>CONTACT US</strong></a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
      <header id="home-section" class="mb-3">
        <img src="img/banner.jpg" alt="" width="100%">
      </header>

Where did I make a mistake? Which CSS property or Bootstrap class needs to be added?

javascripthtmlcsstwitter-bootstrap

Answer №1

To ensure it remains in place on mobile, utilize the .navbar-fixed-top class

Answer №2

Ensure the hamburger dropdown menu in the Mobile version remains position: absolute; to display it above the image

To achieve this, use media queries specifically for mobile devices. Here's an example:

@media only screen and (max-width: 600px) {
    .navbar-collapse{
        position: absolute;
    }
}

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

Creating an HTTP request inside an Export Function in a MEANJS application

Initially, I utilized the Yo MeanJs generator to kickstart my project. As a newcomer in the world of MeanJs, things are starting to look quite complex for me. Currently, my MeanJs application is supposed to retrieve data from an HTTP request but, unfortun ...

javascriptnode.jsmeanjs

Update ng-Bootstrap ToDate field by removing the date when selecting a fromDate

Is there a way to clear the date from the toDate input field while selecting a date from the fromDate input field in ng-bootstrap? <form class="row row-cols-sm-auto" *ngIf="showDateRangeImp"> <div class="col-12" ...

javascriptangulardatepickerangular-ui-bootstrapng-bootstrap

How can I use JavaScript or JQuery to retrieve the HTML content as a string from a specific URL?

How can I extract the URL of a link from a webpage and add it to my code without an ID for that specific link? Is there a way to search based on the content within the <a> tag? ...

javascriptjqueryhtmlajax

Exploring the World of 3D Rotation with Three.js

I currently have 2 mesh objects - the Anchor and the Rod. The Anchor rotates around the z-axis, as shown in the image. The Rod is designed to only move backward and forwards. You can view the image here: . However, I am struggling to determine the matrix ...

javascriptmatrixrotationthree.js

Is it possible to modify the background-image using Typescript within an Angular project?

I have been struggling to change the background image in my Angular project using Typescript. I attempted to make the change directly in my HTML file because I am unsure how to do it in the CSS. Here is the line of code in my HTML file: <div style="ba ...

angularhtmltypescript

Using Webdriver to dynamically enable or disable JavaScript popups in Firefox profiles

I am currently working on a test case that involves closing a JavaScript popup. The code functions correctly in a Windows environment, but when I try to deploy it on a CentOS based server, I encounter the following error: Element is not clickable at point ...

javascriptjavaseleniumfirefoxwebdriver

"Interactive jQuery feature allows users to edit table content live with the ability to update and delete data via

I am working on implementing live editing, updating, and deleting functionality in a table using jQuery. However, I have encountered two problems: When clicking the pen icon from order #3 to #1, it requires 3 clicks, but when clicking from order #1 to ...

javascriptjqueryajax

I am interested in sending an email from a PDF document based on the selected check boxes

I have added a button in a PDF form that says "send an email" and I would like the form to be sent to different email addresses based on which checkboxes were selected previously. For example, there is a question about the "Size of the company" with 2 che ...

javascriptemailpdf

Getting Started with NPM Package Initialization in Vue

I'm attempting to incorporate the v-mask package into my Vue project using npm. Following the documentation, I executed npm install v-mask, but I am unsure where exactly to initialize the code. I tried placing it in the main.js file: import { createAp ...

javascriptnode.jsvue.jsnpmnpm-package

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser

Transforming a Bootstrap 4 HTML project into Angular 9

After stumbling upon a beautiful HTML template that caught my eye, I realized it was built using Bootstrap. Luckily, I came across tutorials on how to convert such templates into Angular 6 projects, making the process seem quite straightforward (like this ...

cssangularbootstrap-4

What is the best way to insert a chart into a div using *ngIf in Angular?

I just started using chart.js and successfully created the desired chart. However, when attempting to implement two tab buttons - one for displaying tables and the other for showing the chart - using *ngIf command, I encountered an error: Chart.js:9369 F ...

javascripthtmltypescriptchart.js

Configuration file stored within the node_modules directory

I have developed a generic npm package that contains my business logic. However, I require access to some information stored in my google cloud storage configuration files. How can I retrieve this data when my package is located within the node_modules fol ...

javascriptnode.jsnpm

What is the best way for me to collect messages submitted through a form on my website?

After completing my website using HTML, CSS, and JavaScript, I added a form with inputs for name, email, and message at the bottom of the page. Now, I am trying to figure out how to receive the information submitted by visitors in my email. ...

javascripthtmlnode.js

The AJAX data variable fails to send to PHP script although $_POST is defined

I am at my wit's end with this problem. I am attempting to send a variable to a PHP script using AJAX, and although I can confirm that $_POST is set, the variable remains undefined. Oddly enough, I have used almost the same code in other instances an ...

javascriptphphtmlajax

Discover the Location and Sign Up for Angular2+ Service

I'm currently using the Google Maps API to retrieve a user's geoLocation data, including latitude and longitude. My goal is to pass this information to a web API service in order to receive JSON output of surrounding addresses. I have implemented ...

javascriptangulargoogle-maps

After performing a Vuex action on one Vue.js component, the update is not reflected on another Vue

I am facing an issue with a component that renders a booking table. When I update my store in another component, the table does not get updated even though the store and computed properties are updated. I suspect that the problem lies with the filter not b ...

javascriptvue.jsvuex

When you try to click outside of react-select, the dropdown doesn't

I've been working on customizing react-select and encountered some issues. Specifically, after modifying the ValueContainer and SelectContainer components, I noticed that the dropdown doesn't close when clicking outside of it after selecting a va ...

javascriptreactjsreact-select

I seem to be having trouble locating the correct file location

Apologies for the simplicity of my question. I've been struggling to include the find.js file in my articles.js file. Despite trying multiple variations, I can't seem to get the pathname right and haven't found a solution online. Can someon ...

javascriptnode.jsexpress

Activate numerous progress bars to animate as the user scrolls beyond the designated anchor point

Check out my website here: I've spent a lot of time working on this site, but I've hit a roadblock when it comes to animating the skill bars. I still want them to animate as users scroll past a certain point, but I'm struggling to figure it ...

javascriptjqueryprogress-bar