Ways to eliminate the gap between the navbar toggle menu collapse and header

Using Bootstrap v4.0 for my website, I have created a basic navbar that looks like this

(Check the link to see the codepen).

The issue with this menu is that when you resize the page to observe how the navigation works on md and sm devices, there appears to be a gap between the navbar and the header:

Take a look at this image

Therefore, my question is: How do I eliminate this space?

Here is the HTML code:

<nav class="navbar navbar-expand-lg navbar-custom BKoodakBold">
        <a href="" class="navbar-brand"><img id="img1" class="hidden-xs" src="img/letter-logo.png" width="100" height="100"></img><script>rotateAnimation("img1",30);</script><img id="img2" src="img/text-logo.png" width="300" height="100"></img></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbarMd">
            <i class="fa fa-bars fa-lg py-1 text-white"></i>
        </button>
        <div class="navbar-collapse collapse" id="collapsingNavbarMd">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Shop
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Specials</a>
                        <a class="dropdown-item" href="#">Lowest Prices</a>
                        <a class="dropdown-item" href="#">Browse</a>
                        <a class="dropdown-item" href="#">Build Weapon</a>
                        <a class="dropdown-item" href="#">Clothing</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Trade</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Help
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Q&A</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Community
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Blog</a>
                        <a class="dropdown-item" href="#">Catalog</a>
                        <a class="dropdown-item" href="#">About</a>
                        <a class="dropdown-item" href="#">Price List</a>
                        <!-- <a class="dropdown-item" href="#">API Documentation</a>
                        <a class="dropdown-item" href="#">npm package</a> -->
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Finance</a>
                </li> 
                <button class="btn BJadidBold">Login/Signup</button>
            </ul>
        </div>
    </nav>

I've scoured the forum for a solution but haven't found anything useful. Your assistance in solving this would be greatly appreciated.

Thank you in advance :)

csstwitter-bootstrapresponsive-designmenunavbar

Answer №1

This area serves as an extension of the .navbar-custom element.

To resolve this, adjust the height:100px; to auto within the media query.

@media only screen and (max-width: 992px) {
    .navbar-custom {
      height:auto;
    }
}

Important: Remember to place the media query at the end of your main CSS file. This is crucial for proper functionality. If you are using CodePen, ensure it is located at the bottom.

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

How did the chat sidebar disappear at Facebook when using the "zoom in" feature?

Have you ever noticed that Facebook can detect users' zoom-in level and dynamically add a .hidden_elem classname to hide the .fbChatSidebar? (See attachments below) I've done some research on this feature and came across a GitHub repository call ...

javascriptcssfacebookzooming

Update the text on a button using a different button

function modify_button_text(){ //update the word from cat to dog. } <button id="button_1_id" >Cat</button> <br><br><br><br> <button id="modify_button_text_btn" >Change the Text of Above Button</button> ...

javascripthtmljquerycssarrays

Using HTML5 and CSS to embed a video tag within a div container

I am currently using the Bootstrap modal plugin and I would like to incorporate a background animated mp4 video. How can I achieve this within the modal dialog where the video will be displayed from top to bottom? Below is the HTML code I have: <div cl ...

csshtml

'Find the declaration/implementation' feature in VS Code

Recently, I made the switch from using Webstorm to VS Code as my IDE. One issue I encountered is related to editing CSS classes in Vue files. Specifically, when I use shortcuts like 'f12' and 'cmd + f12', there seems to be no way to eas ...

cssvisual-studio-codewebstorm

Is it possible to change a Material UI style without resorting to an HOC?

Is there any method to modify the styling of a Material UI component without the need to create an entirely new component using withStyles()? For example, if I am currently displaying the following and simply want to adjust the color of the "Delete" label ...

cssreactjsmaterial-uijsscss-in-js

What is the best way to eliminate blank space within a table cell?

The code snippet below includes a set max-width for table cells to ensure they have equal width regardless of their content. The vertical-align is set to top. However, the first cell appears longer than the second and third cells, leaving a significant gap ...

htmlcsshtml-tabletablecell

What do you think is the root cause of the grey streak?

I've implemented an image slideshow on my website: However, I'm facing an issue with a grey line appearing under the annotation. Here is an example: Below is the code snippet: $(function(){ $('#slides').slides({ ...

javascriptjqueryhtmlcss

What is the best way to design a card featuring a circular image and text using HTML and CSS?

As a novice in the field, I am currently honing my skills in HTML and CSS. The practice project involves replicating the card shown below. https://i.sstatic.net/VbmA4.png I would greatly appreciate any guidance on how to create this type of card using jus ...

htmlcssfont-awesome

Toggling panel and sub-panel controls in AngularJS

In my project, which is a CV builder with front-end editing capabilities, I have multiple panels and sub-panels (DIVs) that I need to show their controls on click in order to perform specific tasks. Currently, my approach for show/hide panels is very basic ...

angularjstwitter-bootstraptoggle

Having issues with Bootstrap 4's bg-inverse not displaying correctly?

While attempting to replicate the navbar example from Bootstrap's documentation, I encountered an issue where the background color of the navbar was not loading properly. <nav class="navbar navbar-inverse bg-inverse"> <a class="navbar-br ...

cssbootstrap-4

Cause a bootstrap column to have overflowing content rather than expanding

I've searched extensively for the solution to my problem, but haven't found a satisfactory answer yet. My goal is to create a location finder with a map on the right and a list on the left. With over 18,000 locations to search through, the list ...

htmlcssbootstrap-4

The height of the division is either inadequate or excessive when set at 100%

After making progress, I hit a roadblock that has me stumped. The issue I'm facing is with the wrapper height setting. If I set it to auto, it stops at the bottom of the content, leaving the background exposed when the content is shorter than the win ...

htmlcss

Troubleshooting problems with Isotope jQuery plugin's layout

Setting up Isotope on this website is proving to be a bit tricky. It's supposed to handle the layout and allow me to append items to the container. The problem lies in the fact that the images don't seem to initialize properly. Here's how I ...

javascriptjquerycss

Responsive height using Material Design Lite

I have a website using MDL, with a prominent header centered on the page. To enhance visibility, I added a background box behind the text. To view the CodePen example, click here. The challenge is to ensure that when the window is resized, such as on a m ...

htmlcssresponsive-designheightmaterial-design-lite

Tips for keeping the footer at the bottom center of the page with Bootstrap?

I'm in the early stages of learning how to build a webpage using HTML & CSS, and I've been utilizing the Bootstrap 4.5 framework. One challenge I'm facing is trying to keep my footer with social media icons centered at the bottom of the page ...

htmlcssbootstrap-4

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

css

Tips for creating a responsive floating page div

Hey there, I'm still fairly new to web development and have a question regarding a registration page that is displayed as a floating div above the main page. How can I ensure that this div is centered in a responsive way? The pages are separated and ...

htmlcss

What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview. Compatible with Android 4.4 KitKat and Chrome version Not compatible with versions belo ...

javascriptandroidhtmlcssstorage

Can you explain the purpose of including text-rendering: optimizeLegibility in a CSS stylesheet?

Can you explain the significance of setting text-rendering to optimizeLegibility in a CSS file? For example, like this: html { text-rendering: optimizeLegibility; } ...

css

Is there a way to adjust paragraph sizes in CSS flexbox so they scale with the font size?

After spending hours trying to figure this out on my own, I finally caved and registered on StackOverflow. Despite Google providing plenty of related questions and examples, I still can't find a solution to my specific problem. The issue at hand is c ...

htmlcssflexbox