Navbar display issues on mobile devices in Bootstrap

When viewing the navbar on a desktop, everything looks good. However, when looking at it on a phone, it appears distorted. How can I either disable the menu for mobile devices or what is the best way to fix this issue?

Here is the code for the navbar:

  <nav class="navbar navbar-vira navbar-fixed-top">
           <div class="navigation-bar">
           <div class="container">
                <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Close Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="logo">
                            <a href="#">XXXX</a>
                        </div>
                </div>
                <ul class="nav navbar-nav navbar-right font-white">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            </div>
        </nav>
jqueryhtmlcsstwitter-bootstrapjquery-mobile

Answer №1

To hide the menu on mobile devices, you can utilize media queries to control its visibility

Take a look at this code snippet

@media screen and (min-width:200px) and (max-width:500px){
  ul.nav{
    display:none;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-vira navbar-fixed-top">
           <div class="navigation-bar">
           <div class="container">
                <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Close navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="logo">
                            <a href="#">XXXX</a>
                        </div>
                </div>
                <ul class="nav navbar-nav navbar-right font-white">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            </div>
        </nav>

Hope this solution works for you PS: Check how it looks on a full screen view

Answer №2

In addition to the previous response explaining how to fully hide the navigation bar,
the provided HTML code below should enable the navigation to function as normal. It's important to include Bootstrap jQuery in order for the dropdown feature to work correctly. The complication may have been due to the logo division.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                <a class="navbar-brand" href="#">XXXX</a>
            </div>
            <div class="collapse navbar-collapse" id="main-nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

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

Utilize angular to call a function when navigating

Having an issue with ChartJS while creating a chart using angular. The problem arises when navigating to a new page and then back to the original one, as the JavaScript is not triggered again. Is there a way to automatically invoke a JavaScript function o ...

javascriptjqueryangularjs

degree of transparency when semi-transparent elements overlap

Imagine you have two <div> elements, one with an opacity of .5 and another overlaying it with the same opacity. What would be the combined opacity of the two? Interestingly, it's not as simple as, .5 × .5 or even, .5 + .5 How can this ...

htmlcssmathtransparency

The application is experiencing issues with loading Django's CSS files properly

When working on my Django application, I've noticed that the CSS code being loaded differs from what is written in the files. What could be causing this discrepancy and how can it be fixed? ...

cssdjangodocker

What is the best way to pass a value using AJAX to a controller in Zend Framework 2?

Here's the code snippet I have for an ajax script: <SCRIPT> $('#grupo').on('change', function() { var opc=$(this).find(":selected").text(); $.ajax({ url: "seleccionGru ...

jqueryajaxzend-framework2

Troubleshooting the Height Problem in Material-UI's Menu

I am trying to make the menu height responsive by setting it equal to the window height using CSS. I want the menu height to increase as the page length increases due to added elements. I have attempted using "height:100%" and "height: 100vh" in the styles ...

javascriptcssreactjsmaterial-uimenu-items

utilizing object methods to retrieve object attributes

I am currently working on developing a new application named myApp. This application includes a property called regularNameErrors and a method called populateJSON. The populateJSON method utilizes an AJAX call to retrieve a JSON object, which is then added ...

javascriptjqueryajaxobject

When using an `if` statement in CSS to determine if the value of `left` is

Is there a way to trigger an event only when the object reaches a specific percentage of its left position? I am trying to achieve this using jQuery with the .css() method. Here is what I have so far: HTML: <div id="midDiv"><img ..../></di ...

javascriptjqueryhtml

What is the method for accessing cookies using JSONP?

Hello, I am trying to load a page from index.html using the following code: <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script> <script> function jsonCallback(json){ console.log(json); alert(document.c ...

javascriptjqueryjsonjsonp

What is the reason behind the default disabling of bootstrap multiselect options?

Just diving into the world of bootstrap and I'm puzzled as to why my simple multiselect options aren't responding when clicked. UPDATE The first multiselect option on the test-site linked below is the one giving me trouble. I've tried it o ...

javascriptjqueryangularjshtmltwitter-bootstrap

Mastering the Art of Content Swapping in SPA

Hey there! I'm in the process of creating a webpage using tornado io and incorporating various graphs. To add some single page app magic, I decided to swap out content within a div like so: <div id="chartType"> Chart goes here</div> <a ...

javascriptjqueryhtml

Displaying a dropdown selection that showcases two object properties lined up side by side

I need the select option dropdown values to display employee names along with their titles in a lined up format. For instance, if my values are: Bob Smith Director Mike Kawazki HR Jane Doe Manager I want them to be shown as: Bob Smith Director Mi ...

javascripthtmlcss

What is the best way to pass parameters in jQuery using .on()?

Hello there, I have a slight dilemma :) Could you please advise me on how to pass a parameter to an external JavaScript function using the .on method? Here is the code snippet: <script> var attachedPo = 0; $this.ready(function(){ $ ...

javascriptjquery

Retrieving input values from different input types within a div using jquery

I have a dilemma with two divs that I switch between based on whether the user wants to add single select options or multiple. Only one div is visible at a time. <div class="form-group row" id="divOptions"> @Html.Label("Choices", htmlAttrib ...

jqueryhtmlajaxasp.net-mvc

Utilizing external libraries in Vue 3 CLI projects

I've been attempting to load modules like Jquery and @tensorflow/tfjs, but I'm having trouble getting them to work. Both have been installed using npm. Everything in my @vue3/cli project works perfectly until I try to import these two modules. ...

jqueryvue.jsecmascript-6tensorflow.js

Guide on inserting tooltip to designated header column in primeNG data table

Html <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{col.header}} </th> ...

htmlangulartypescriptprimengprimeng-datatable

Is there a jQuery AJAX method that can be invoked during the waiting process for error, success, or completion?

As I was about to use an ajax function and looking through the API, a question popped into my head. Is there a way to execute a function while waiting for the success, error, done, etc. callbacks to be triggered? I wondered if there could be something lik ...

jqueryajax

I am facing difficulty importing emotion js style using dynamic variables

I recently designed a webpage that has the following appearance: https://i.stack.imgur.com/AnIXl.jpg Here is the code from my _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme ...

javascriptcssreactjsnext.jsemotion

Optimizing performance with queues and asynchronous requests in jQuery

Having two functions and facing a single issue. hideTable(); ajaxCall(params); The hideTable function is defined as follows: function hideTable() { if (effects) { $('#jquerytable tbody').fadeOut(speed); } } I am looking to ha ...

jqueryajaxqueue

Maximizing the potential of a single .js file for multiple .html pages with AngularJS

I have a JavaScript file containing a function that I want to be accessible by multiple HTML pages without duplicating it in another file. Currently, the JS file starts with the following code snippet: (function(){ var app = angular.module('Proj ...

javascripthtmlangularjs

"Enhance your website with Wordpress and Divi by adding dynamic image replacement on hover

In search of a code to insert into my project Utilizing images to create a large interactive button I'm currently using the divi code module within WordPress. I am seeking the ability to have an image switch with another image when hovering over it, ...

javascriptjqueryhtmlcsswordpress