Bootstrap navigation bar unresponsive on mobile devices

<nav class="navbar navbar-expand-sm fixed-top navbar-dark bg-dark">
                <a class="navbar-brand" href="#">Yehee-Lounge</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 mr-auto">
                        <li class="nav-item active"><a class="nav-link scroll" href="#top">Home</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">About</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Learn Yeehee</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Courses</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Events</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Impression</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Contact</a></li>
                        <li class="nav-item"><a class="nav-link scroll" href="#features">Newsletter</a></li>
                    </ul>
                    <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
                </div>
            </nav>

I have created a simple Bootstrap 4 navbar, but I am facing an issue where the height of "Learn Yeehee" increases before collapsing when I reduce the screen width. I want it to stay at the same height until it collapses. How can I achieve this? Please refer to the images linked below for better understanding:

Before Collapse:

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

During Collapse:

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

After Collapse:

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The reason for the text wrapping in this way (causing menu items to span across two lines) is due to limited screen space.

Therefore, there are 2 primary solutions available:

1) Swap out navbar-expand-sm with navbar-expand-lg. This will create more room and resolve the problem.

2) Decrease the number of items displayed in your menu by moving some to a drop-down menu (or relocating them to a footer section).

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

What is the best way to share dynamic content from a DIV or SPAN element on WhatsApp using jQuery?

I’ve been attempting to share the text content of a specific DIV on WhatsApp, but so far I haven't been successful. My goal is to only share a portion of the document (specifically the contents of showques). Below is the code snippet I've been ...

javascripthtmljqueryreactjswhatsapp

Trying to display logo using 'content' property in CSS

I've been trying to display a logo on the header of my website, but I'm having trouble getting it to show up. I attempted to set the logo using HTML syntax as well as the following CSS code: .div { content: url (...jpg); } However, both metho ...

htmlcss

Looking for a way to execute code exclusively when the 'other' option is chosen? Let's tackle this challenge with Javascript and swig

I am looking to utilize swig (my chosen templating engine) for incorporating JavaScript code that will only display when the user selects the 'other' option from the select menu. <div class="form-group"> <select class="custom-select"&g ...

javascriptcssnode.jsswig-template

Is it possible for the ImageListItem Img to occupy the entire Card Space?

I am faced with the challenge of making an ImageListItem occupy all available space within a card. The goal is to have a rounded Card with an image background and a text bar at the bottom. However, I am struggling to get the ImageListItem to expand beyond ...

cssreactjsmaterial-uireact-component

Google Web Toolkit - Update PopupPanel layout upon rotation

I am working on designing a context menu for specific elements utilizing a PopupPanel; the context menu is expected to be quite extensive and intricate. My goal is to have a collection of buttons, an image, and some text associated with the clicked element ...

cssgwtpopup

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...

javascriptjqueryhtmlcss

What is the process for switching directories and renaming a file when uploading in nodeJs?

I am currently using multer and fs to handle the upload of an image file. How can I modify the directory where uploaded files are stored? Currently, all files are saved in my "routes" folder instead of the "uploads" folder created by multer. Additionally, ...

javascripthtmlnode.jsexpressmulter

Flip the Script: JQuery slideshow in reverse

Hey there, I've been tinkering with a JQuery slideshow and encountering an issue. All my images in the HTML are stacked on top of each other, and I attempted to modify the code so it starts with the last image. However, my attempts have not been succe ...

jquerycssslideshow

How can I ensure that the content within a div does not overflow and that horizontal scrolling is enabled? What is the correct way

After designing my profile page, I encountered a problem related to horizontal scrolling caused by overflow. Despite trying various solutions like adjusting the width of .profilePg, I haven't been able to resolve this issue without disrupting the over ...

htmlcssoverflow

Top-to-Bottom Border Vanishing

I have a div that has a left border with the following style: border-left: 3px solid #F90; Now, I want the border to fade out gradually from top to bottom, going from full opacity at the top to completely transparent at the bottom. However, my attempt usi ...

htmlcss

What is the best way to center this image horizontally within its variable-sized parent container?

I am currently working on a webpage that has a responsive design. The page features a list of products, with the product listing adjusting in size as the page width changes. My goal is to center the product image within its container, ensuring that the i ...

htmlcssresponsive-design

Refreshing the form upon submission

The form provided below may include various elements such as text fields, drop-down menus, and selection boxes, enabling the user to update their profile. The MySQL fields are updated after the form is submitted. <form method="post"> My Name: <in ...

phpmysqlhtml

When I shift a JavaScript function from inline code to a separate JS file, I encounter the error message "function is not defined"

I am struggling to get a simple task done: <!DOCTYPE html> <html lang="en"> <head> </head> <body> <script src="js/test.js" type="text/js"></script> <button onclick="test()" type="submit">Test</button> ...

javascripthtmllaravel

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...

htmlcssweb-hostingfile-management

The functionality of XPATH does not seem to be properly executed with JQuery

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("[href!='http://w ...

jqueryhtml

Displaying information from a database in HTML dropdown menus and tables

Recently, I started learning PHP and I am facing a challenge with my database that has 5 columns: "id", "fldName", "fldPrice", "fldSupplier", and "fldPackage". In my HTML table, I have select options where I display "fldName" based on a specific value of ...

phphtmlmysql

Tips for presenting styled HTML content within a dynamic list using HTML and JavaScript

Is there a way to display HTML formatted text within a dynamic list in HTML? I've tried implementing it, but the tags are being displayed instead of the formatted text. Here's an example of the code: <!DOCTYPE html> <html> <body> ...

javascripthtmldomappendchild

Background image color not displaying correctly

I've been attempting to overlay a transparent color on top of a background image. While the background image is displaying correctly, I'm having trouble getting the color to show up. I noticed that this question has been asked before. I tried im ...

htmlcss

CSS equal-width table columns

My goal is to create evenly spaced columns like in this example. It used to work in a previous version, but now I can't seem to figure out what's causing the difference. Even when copying the old HTML into a jsfiddle and applying the same CSS, it ...

csscss-tables

Tips for inserting information into HTML components in JSP

Hey everyone, I'm diving into JSP for the first time and I'm trying to wrap my head around how to display data from an ArrayList in my HTML. Can someone help me out? I'm thinking of doing something like this: <article> <p>< ...

javahtmljsp