When the screen shrinks, the navbar toggler disappears and blends in with the background

My toggle button is designed to work only for xs screens, where all the navigation links go to the toggle. However, when I click on the toggle button, it initially displays with a white background and then suddenly collapses to the size of the navbar, causing the nav links to merge with the content below the bar. Refer to the images for a better understanding. Any assistance would be greatly appreciated!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-light navbar-expand-sm fixed-top">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
            <i class="navbar-toggler-icon"></i>
        </button>
        <a class="mr-auto navbar-brand nh myfont" href=".\index.html"> <img src="images/logo.png" width=6 0px height=7 0px> Sidhant Aggarwal</a>

        <div class="collapse navbar-collapse" id="Navbar">
            <ul class="navbar-nav mr-auto nl">
                <li class="nav-item mrn"> <a class="nav-link" href="#about"> About</a></li>
                <li class="nav-item mrn"> <a class="nav-link" href="#"> Resume</a></li>
                <li class="nav-item mrn"> <a class="nav-link" href=".\contactus.html"> Certifications</a></li>
            </ul>
        </div>

        <ul class="navbar-nav ml-auto nav-flex-icons flex-row">
            <li class="nav-item"> <a class="btn btn-social-icon" href="http://www.linkedin.com/in/"><i class = "fa fa-linkedin fa-xs"></i></a></li>
            <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-github fa-xs"></i></a></li>
            <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-envelope fa-xs"></i></a></li>
        </ul>
    </div>
</nav>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65150a151500174b0f1625544b5453425d"/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

Answer №1

Have you applied a background to the navbar-nav? To confirm, you can assign a color

Check out the code snippet below:

.restOfThePage {
  margin-top: 100px;
}

.navbar-nav {
  background-color: #fff;
}
<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 navbar-expand-sm fixed-top">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
                <i class="navbar-toggler-icon"></i>
            </button>
    <a class="mr-auto navbar-brand nh myfont" href=".\index.html"> <img src="images/logo.png" width=6 0px height=7 0px> Sidhant Aggarwal</a>
    <div class="collapse navbar-collapse" id="Navbar">
      <ul class="navbar-nav mr-auto nl">
        <li class="nav-item mrn"> <a class="nav-link" href="#about"> About</a></li>
        <li class="nav-item mrn"> <a class="nav-link" href="#"> Resume</a></li>
        <li class="nav-item mrn"> <a class="nav-link" href=".\contactus.html"> Certifications</a></li>
      </ul>
    </div>
    <ul class="navbar-nav ml-auto nav-flex-icons flex-row">
      <li class="nav-item"> <a class="btn btn-social-icon" href="http://www.linkedin.com/in/"><i class = "fa fa-linkedin fa-xs"></i></a></li>
      <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-github fa-xs"></i></a></li>
      <li class="nav-item"><a class="btn btn-social-icon" href="mailto:"><i class = "fa fa-envelope fa-xs"></i></a></li>
    </ul>
  </div>
</nav>
<div class='restOfThePage'>
  <h1>Other content</h1>
  <p>What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using
    Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default
    model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary
    to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of
    the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
    1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
    English versions from the 1914 translation by H. Rackham. Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't
    look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
    necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore
    always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>

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

Having issues with implementing Bootstrap 4 dynamic nav-pills in PHP CodeIgniter

When I select different product categories, only the items from the active category are displayed. When I click on another nav-item, the previously displayed items remain unchanged and I'm unable to change the class "show active" in the tab-panes. Co ...

Alphabetically sorting objects in an array using Angular

If your TypeScript code looks something like this: items: { size: number, name: string }[] = []; ngOnInit(): void { this.items = [ { size: 3, name: 'Richard' }, { size: 17, name: 'Alex' }, ...

Font Awesome solely alters the font size within html, rather than css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...

Navigation isn't aligning correctly on the right side

I am having trouble with my navigation menu not aligning properly to the right. <div class="logo"> <h2><i class="icon-reorder"></i> Frosty</h2> </div> <div class="nav"> <a href="#">Home</a> </div& ...

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

Apply the transition property to all elements except for the text inside a specific tag

I'm wondering if it's possible to apply a hover transition effect to everything in this tag except the text within it. The desired effect is for the button to fade away while the text remains visible. Below is the code I have written so far: ul ...

Troubleshooting problem with displaying circular tag image below an image using Jquery

I'm looking to enhance my HTML DOM by adding circular tag images with dimensions of 25x25 pixels to all image tags. While my current method is functional, I've noticed that the position sometimes shifts and the tag often ends up displayed below t ...

The Modal feature on cards consistently displays the initial object every time

When applying Bootstrap Modal to a list (Card-Columns) of Cards, the popup always loads the content of the 1st Card. Here is how my List Component looks like: <div class="card-columns" infiniteScroll [infiniteScrollDistance]="0.3" [in ...

What is the best way to distinguish Xpath when dealing with several elements that share identical attributes and text?

I need to find and click on the link labeled "Customer One". The current xPath I am using is: //div[contains(@class,'client-info') and contains(div/text(),'Customer')] When using Firepath, this xPath returns four separate elements (I ...

What could be causing the Bootstrap ProgressBar to not show up?

Having an issue with the ProgressBar component from react-bootstrap: <ProgressBar now={dynamicValue} /> The value dynamicValue changes for each component. However, I am unable to get the progressBar to display in my case. ...

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

What is the best way to ensure that the input areas stretch all the way to the edge of the screen?

This form is structured similar to Bootstrap: HTML: <div class="container"> <div class="row"> <div class="form-group row-group"> <label class="col-6">First name</label> <input class="col-6" type="text" v ...

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

I am facing an issue with three multi-select dropdown lists. When a user selects options from these lists and then presses the submit button, the selected text should display in a textarea. However, if the user manually changes some text in the textarea ...

Tips for preventing redundant data entry in a table

Currently, my table displays like so: https://i.sstatic.net/iozOF.jpg The structure of the HTML for the table is as follows (only a snippet is shown, as the rest looks similar): <table class="table table-bordered table-condensed"> <tr> ...

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

Is it possible to display or hide a spinner within a span using Javascript and AJAX?

When submitting a contact form, I want to display and hide a spinner on the submit button. The spinner should be visible while the form is being submitted and hidden once the submission is complete. Below is the code for my submit button with the spinner: ...

Displaying a webpage within a div section of another webpage by referencing it from a separate webpage

If I have three html pages named index.html, page1.html, and page2.html. Imagine that I am currently on page2.html and there is a list of items, each linking to different pages. Let's say one item links to page1.html. Is it feasible to load page1.ht ...

How Python Flask sends a string as &#34 to an HTML page

I am working on a Flask app and I need to send simple JSON data from the app.py file to an HTML page. Here is the relevant code in my app.py: jsonArr = [{"type": "circle", "label": "New York"}, {"type": "circle", "label": "New York"}] return ...

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

Error encountered while validating jQuery word cloud

Can anyone please assist me with validating a jQuery word cloud in HTML5? I'm encountering issues with all of the rel values showing this error message: "Bad value 1 for attribute rel on element a: Not an absolute IRI. The string 1 is not a registere ...