What could be the reason for a missing button in the Bootstrap navbar on smaller devices?

I'm new to Bootstrap and noticed on smaller devices, there is no visible button to tap for displaying the menu items. However, tapping on the upper right-hand side does reveal them. What could I be missing here?

index.html

<!DOCTYPE html>

<html lang="en" data-ng-app="wtApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!—META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"—>;
<meta name="fragment" content="!">
<meta name="google-site-verification" content="k-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<title>Writer's Tryst, where authors, publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<meta name="keywords" content="Writer's Tryst, authors, publishers, producers, agents, writers, genres, manuscripts, books,   find, meet." />
<base href="/" />
<link  href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css.map">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/normalize-min.css" />
<link rel="stylesheet" href="css/bootstrap-dialog.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
</head>
<body data-ng-controller="mainController" >
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-79802711-1', 'auto');
ga('send', 'pageview');

</script>
<header>
<nav id="navbar" class="navbar navbar-light navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button>
<div style="display: inline-block">
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo-min.png" alt="logo" /></a><br/><br/>
<div id="shares" class="row">   
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>

<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>

<!-- StumbleUpon (url, title) 
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon" title="stumble-upon">
<i class="fa fa-stumbleupon-circle"></i>
</a> -->
<!-- Reddit (url, title)
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit" title="reddit">
<i class="fa fa-reddit-square"></i>
</a>  -->
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div> <!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="#/"><i class="acctive glyphicon glyphicon-home fa fa-home"></i> Home</a></li>
<li><a href="#writers" id="writers-link" class="fa fa-book" > Writers</a></li> 
<li><a href="#enablers" id="enablers-link" class="fa fa-thumbs-o-up" > Enablers</a></li> 
<li><a href="#about" class="fa fa-info-circle"> About</a></li> 
<li><a href="#privacy" class="fa fa-user-secret"> Privacy/Rules</a></li> 
<li><a href="#contact" class="fa fa-envelope-o"> Contact</a></li> 
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="fa fa-sign-in"></i> Log-In</a></li> 
<li><a id="accounts-link" href="#accounts"><i class="fa fa-user hidden"></i> Create Account</a></li> 
<li class="dropdown" data-toggle="popover" data-trigger="hover" data-placement="bottom" >
<button class="btn btn-custom-primary dropdown-toggle fa fa-user" style="margin-top: 8px; color: white;" data-html="true" type="button" id="user-dropdown-link" data-toggle="dropdown"><span class="caret"></span></button></a>
<ul class="dropdown-menu" role="menu" data-aria-labelledby="create-account-link">
<li><a id="update-profile" href="#update-profile" class="fa fa-database"> Update profile</a></li>
<li><a id="manage-uploads" href="#manage-uploads" class="fa fa-book"> Manage uploads</a></li>
<li><a id="review-submissions" href="#review-submissions" class="fa fa-book"> Review Submissions</a></li>
<li><a id="update-submissions" href="#update-submissions" class="fa fa-book"> Update Reviews</a></li>
</ul>
</li>
<li ><a id="reset-pwd-link" href="#reset-pwd"></a></li> 
</ul>
</div> <!--navbar-collapse-->
</div> <!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10 m-b-10"></div> 
<div id="main" class="content container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
<footer class="panel panel-default panel-transparent">
<div id="foot1" class="text-right small">&#169; 2016 Ronald Tornambe, Inc.</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-dialog.js"></script>
<script defer src="js/recaptcha.js"></script>
<script async defer src="https://use.fontawesome.com/9f2a0d923f.js"></script>
<script defer src="js/pages.js"></script>
<script defer src="js/common.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
$("#accounts-link").addClass("hidden");
$(function () {
$("#review-submissions").on("mousedown", function () {
sessionStorage.setItem("submissions", "review");
});
$("#update-submissions").on("mousedown", function () {
sessionStorage.setItem("submissions", "update");
});
setupPage();
});
</script>        
</body>
</html>
androidiosangularjstwitter-bootstrap

Answer №1

For my situation, I had initially set navbar-light but once I switched it to navbar-default, the icon bars suddenly appeared.

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

Finding the Closest Element with jQuery's .closest() Method

I'm facing an issue while trying to select an element that is positioned above another element. Specifically, I want to target the nearest occurrence of the .discount-dropdown class that appears above the .discount-type class. Can anyone help me figur ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to utilize ng-if to conceal a component in AngularJS when a button in a separate component is clicked?

I am facing a challenge with two child components within a parent component. My goal is to hide component1 when a button in component2 is clicked. Below is an illustration of the current code I am handling: Parent Component HTML: <div ng-app='ap ...

javascriptangularjscomponents

What is the best way to link a variable to a specific property within a

I am facing an issue with adding data from the server to a JSON property and displaying it. I know that JSON only accepts primitive types, so how can I dynamically add data to a JSON property? For instance, in the code snippet below, I am trying to assign ...

javascriptangularjsjson

The $watchCollection function will consistently have the identical object assigned to both the new and old values

When using $watchCollection to monitor an object, how can I determine which property of the object has been changed? The problem I am facing is that in the callback function, the new and old values are both the same objects. Is there a way to watch an obje ...

jqueryangularjs

"Discover the step-by-step guide for incorporating password reset functionality in AngularJS using UI router

I am currently working on an AngularJS application that includes login, registration, and forgot password features implemented using JWT. Additionally, I am using UI Router for managing various states within the app. When a user clicks on the "forgot pass ...

angularjs

Dealing with query strings within routeprovider or exploring alternative solutions

Dealing with query strings such as (index.php?comment=hello) in routeprovider configuration in angularjs can be achieved by following the example below: Example: angular.module('app', ['ngRoute']) .config(function($routeProvider, $loc ...

javascriptangularjsangular-ui-router

Which function is triggered first - onclick or ng-click?

Currently, I have a button with a validation process occurring on click. The validation process triggers a web service call and other processes if successful. However, I'm uncertain if the validation is actually taking place. This is my page setup: ...

javascriptangularjs

Aligning text at the center of the page, stacked on top of each other

I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...

htmlcsstwitter-bootstrap

Discovering strings within strings on the Android platform

In my current project, I am dealing with a lengthy JSON text that contains movie titles. I need to extract these titles from the following pattern: ((((((( .","title":" AND ","type":" ))))))) After researching other solutions, I came across one appro ...

javaandroidjsonregexstring

Synchronize the Android database with a remote server database

I am currently developing an Android app that utilizes two databases. My goal is to synchronize these databases with two identical databases on a web server, ensuring they have the same field structure and field names. Before syncing, I need to access info ...

phpandroidmysqldatabasesynchronization

Unraveling Angular: Generating a Random Sequence of Symbols from an Array Multiple Times

A collection of symbols from A to E is at my disposal. My task is to display each symbol using ng-repeat, but the order in which they appear should be random and each symbol needs to be repeated n times (let's say 4). ...

arraysangularjs

Having trouble accessing the $scope property value in AngularJS

1. script.js var appProfileInfo = angular.module('profileInfoApp', ['ngMaterial','ngAria','ngAnimate','ngRoute' ]); 2. messageController.js appProfileInfo.controller('messageController', functi ...

angularjs

The scope's attribute is present, but the variable within the scope's attribute is not

Currently, I am delving into angularJS development, but encountering a perplexing issue. I am attempting to format a JSON into a table with intricate rules. The JSON structure currently is as follows: { "id":"test", "title":"Test Sample", "de ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-resource

Issue with Angular controller not refreshingalternatively:Angular

I just started reading an AngularJS book by O'Reilly and I encountered a problem with the first example. Instead of seeing "hello" as expected in place of "{{greeting.text}}", it displays exactly that. I have double-checked my angular linking and even ...

javascriptangularjs

Transferring information between AngularJS and Express/Node without using AJAX

My application is built using AngularJS on a node/express backend, with user authentication handled by passport. After a user signs in or signs up, the communication between my Angular controllers and express is done through $http ajax/xhr calls. The form ...

javascriptnode.jsangularjsexpress

A guide on implementing the grid feature in Angular.js

Looking to add the following features in my Angular grid: Paging Filtering Column-wise sorting Can anyone recommend an Angular JS grid that supports these functionalities? ...

angularjs

JSON Response Handler

Here is the coding structure I am currently utilizing: func extractData(){ URLSession.shared.dataTask(with:apiURL!, completionHandler: {(data, response, error) in guard let data = data, error == nil else { return } do { ...

iosarraysjsonswiftxcode

Maintain the div height as the image loads

Is there a way to prevent the collapse of the .img-container while an image is loading? Currently, when the image takes a few seconds to load, the container collapses and only expands to full height once the image has loaded. I would like the container to ...

cssimagetwitter-bootstraptwitter-bootstrap-3

Error message: "An issue occurred with the Bootstrap Modal in

I've designed an AngularJS app like so: <!DOCTYPE html> <html ng-app="StudentProgram"> <head> <title>Manage Student Programs</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Can diverse array elements be divided into separate arrays based on their object type in JavaScript?

Looking to create new arrays based on objects with similar attributes from an existing array? Here's how: Starting with this [ {name: "test", place: "country"}, {name: "walkAndEat", Long: 100, Lat: 15, Location: "place name"}, {name: "te ...

javascriptarraysangularjsmean