The Bootstrap navigation bar vanishes when viewed on mobile devices

I've integrated Bootstrap 5 with my navbar, but when viewed on a mobile device, the buttons disappear. Even hovering over them doesn't display anything. Is there a solution for this issue?

Below is the code snippet:

<nav class="navbar navbar-expand-xl navbar-dark hover-shadow" style="background-color: #252c3a;" role="navigation">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">
            <img src="https://i.imgur.com/pK7YWmW.png" height="60" width="212" alt="Server Knight profile picture.">
        </a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active navbar-btn"
                        href="https://discord.com/oauth2/authorize?client_id=801424420605263902&permissions=8589934591&scope=bot">Invite
                        me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active navbar-btn" href="https://discord.gg/yAd6Y2GcTe">DSOF</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link active navbar-btn dropdown-toggle" id="navbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        About the bot
                    </a>
                    <ul class="dropdown-menu dropdown-background" aria-labelledby="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" id="dropdown-btn" href="/docs">Docs</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff">
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/faq"& gt;Faq</a></li>
                        <li>
                            <hr class="dropdown-divider" style="border-color: #fff&q uot;>
                        </li>
                        <li><a class="dropdown-item" id="dropdown-btn" href="/team">The team</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link active navbar-btn dropdown-toggle" id="na vbarDropdownMenuLink" role="button"
                        data-bs-toggle="dropdown" aria-expanded=&quo t;false">
                        Applications
                    </a>
                    <ul class="dropdown-menu dropdown-background" aria-labelledby ="navbarDropdownMenuLink">
                        <li><a class="dropdown-item" id="dro pdown-btn" href="/appeal">Appeal a report</a></li>
                        & lt;li>
                            <hr class="dropdown-divider" style=&q uot;border-color: #fff">
                        </li>
                        <li><a class ="dropdown-item" id="dropdown-btn" href="/apply"&g t;Apply to be a bot developer</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link active navbar-btn" href="/donate">Donate</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <a href="/login" class="login-btn nav-li nk active" id="login-btn">Login</a>
            </ul>
        </div>
    </div>
</nav>

Additionally, you can view the code in this JSFiddle link

htmlcssbootstrap-5

Answer №1

The solution to your issue lies in the following line of code:

<nav class="navbar navbar-expand-xl navbar-dark hover-shadow" style="background-color: #252c3a;" role="navigation">

According to Bootstrap's documentation, the navbar will only appear on extra-large devices (1200px width) due to the presence of `navbar-expand-xl`. If you wish to make it visible on mobile devices as well, simply remove `navbar-expand-xl` from the code.

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 can you specify the maximum width and height for a TextField in JavaFX using CSS?

Is there a way to set preferred and maximum width and height for a TextField using CSS? ...

cssjavafx

A guide on retrieving values from programmatically created input elements in Java

Here's the HTML code that I am currently working with: <form method="get" action="#" id="startForm"> <input type="text" name="period" id="period" placeholder="The number of days"/> <input type="submit" name="submit" value="subm ...

javascripthtmlfor-loopdom

Automatically updating the results section while executing SQL queries in PHP

Here is a JavaScript/Ajax code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready (function () { var updater = se ...

javascriptphpjqueryhtml

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

javascripthtmlrazor

The ng-model remains unchanged when the <select> element is modified using JavaScript

I am currently working on creating a customized dropdown box with the help of JavaScript and anglersJS to connect the data with the select element. The user interaction involves clicking on a div element that is styled to act as the dropdown option. This d ...

javascripthtmlangularjs

Is it possible to customize the Menu hover effect in Element Plus and Vue?

Hello everyone, I'm a beginner with Vue, HTML, CSS, and Element Plus. I am trying to customize a Side Bar Menu with my own hover effect, but it doesn't seem to be working. Whenever I change the background color of the el-menu element, the hover e ...

javascripthtmlcssvue.jshover

List formatted in a table

Can a list be inserted into a table using markdown? I attempted to research this but came up empty-handed. An example of a Table: Fruit |Color ---------|---------- Apples |Red Pears |Green and an example of a list: List item 1 List item 2 ...

htmlmarkdown

How can I store HTML5 input type date/time data accurately as Date Time in Rails?

Is there a way to handle two inputs in HTML5 so that both can be sent to the controller and saved as Date Time? Alternatively, is there any helper or gem that mimics a date and time picker from HTML5? HTML5 inputs: %input{:type => "date", :value => ...

jqueryruby-on-railshtmldatetimehtml-helper

Can you explain the function of the "Normalize CSS" feature in Fiddle?

I recently came across this interesting fiddle: Demonstration of rounded corners It achieves the desired outcome, however, I noticed that it only works properly when the "Normalised CSS" checkbox is selected. When it's not checked (like in my code), ...

css

Personalize or delete the spacing within an ion row

Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrate ...

htmlcssangularionic-frameworkionic2

A guide to creating smiley emojis using solely HTML and CSS

Is there anyone who can assist me in constructing this happy face? https://i.sstatic.net/yyYYQ.png ...

htmlcss

The content on the right side is spilling over my footer and causing

I am struggling to understand why the content in the right column is overlapping my footer. I believe it has something to do with a float, but I can't seem to pinpoint the exact issue. Could you please take a look at this page for me and provide some ...

htmlcsscss-float

Using a personalized font in CSS isn't functioning correctly and is displaying Times New Roman instead

I've been struggling to include a custom font in my project, but it's not working as expected. Here's how I added it to the .css file: @font-face { font-family: 'Open Sans'; src: url('/open-sans.eot'); src: u ...

css

JavaScript: Creating Custom IDs for Element Generation

I've been developing a jeopardy-style web application and I have a feature where users can create multiple teams with custom names. HTML <!--Score Boards--> <div id="teamBoards"> <div id="teams"> ...

javascriptjqueryhtml

Tips for clearing input fields in React.js without using an empty string

Is there a way to reset the input field in this specific scenario? const [username, setUsername] = useState({ username: "", usernameError: "" }); const handleUsername = (inputUsername) => { if (inputUsername.length > ...

javascripthtml

Group HTML Tables According to Specific Attributes

Let's cut to the chase. My table is functioning well, printing all the necessary information without any issues. However, I'm facing a challenge when it comes to grouping the data rows under Program 1 together. Instead of having Program 1 print, ...

javascripthtmljqueryajax

Move the div in an animated way from the bottom of the screen to the right

I am facing an issue with the image animation in my project. Currently, the image moves from the bottom to the left corner, but I want it to move from the bottom to the right corner instead. I have attempted using the transform translate property to achiev ...

css

What steps should I take to change the orientation of these items from vertical to horizontal display?

I'm struggling to get these items to appear horizontally (side by side) instead of vertically on my webpage. They are linked to a database, hence the PHP code included here. If you need more information, please feel free to ask. body { font: no ...

htmlcssdatabaseinlinedisplay

Any suggestions for solving the issue of breaking the line at the end of a <td> within a <table> element using jQuery or JavaScript?

Here is a table format that I have: $(document).ready(function() { var enteredText = document.getElementById("textArea").value; var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; var characterCount = enteredText.length + numberOfLineB ...

javascriptjqueryhtml

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

While working on a tabbed control with mobile-angular-ui (), I encountered an issue when trying to generate the tabs dynamically. Initially, everything looked good with the following code: <ul class="nav nav-tabs" ui-state='activeTab' ui-def ...

javascriptangularjshtml