I'm having trouble understanding why the bootstrap menu isn't visible on mobile and tablet devices. Check it out live at:
I'm having trouble understanding why the bootstrap menu isn't visible on mobile and tablet devices. Check it out live at:
Due to the navbar-brand being set to 100% width, it is covering the navbar-toggle button, causing redirection back to the index page when the toggle-button is clicked: refer to the image.
https://i.sstatic.net/3QmT6.png
To resolve this issue, you have two options: adjust the z-index of the navbar-toggle class (e.g., z-index: 1060;) or specify a width for the image.
Note that there may be some unexpected behavior with the img-responsive class applied to the logo when toggling the menu open, although this class is not necessary.
See below for a demonstration featuring a fixed width and centered navbar-brand image:
/**FOR DEMO ONLY**/
.navbar .navbar-brand {
padding-top: 0;
}
.navbar .navbar-toggle.lefty {
float: left;
margin-left: 15px;
}
/**FOR DEMO ONLY**/
@media (max-width: 768px) {
.navbar .navbar-brand {
position: absolute;
width: 200px;
left: 50%;
transform: translateX(-50%);
background: red;
}
.navbar .navbar-brand img {
margin: 0 auto;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
<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="#">
<img src="http://placehold.it/150x50">
</a>
<!--FOR DEMO ONLY -->
<button type="button" class="navbar-toggle collapsed lefty" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--FOR DEMO ONLY -->
</div>
<div class="collapse navbar-collapse" id="bs-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
</div>
</nav>Consider including aria-controls="bs-example-navbar-collapse-1"
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="bs-example-navbar-collapse-1">
Hello, I need assistance from someone. I encountered an error message after trying to delete a row even though I have declared the button already. Error: deleted1 is not defined at HTMLButtonElement.onclick Could it be due to the script type being modul ...
I'm working on a React function that involves a set and I need to update an HTML element using the data from this set. Below is an example of my code: const updateElement = (mySet) => { document.getElementById('myId').innerHTML = Arra ...
Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...
I am currently working on dynamically populating the data-title and data-content of a Bootstrap popover using JSON data generated by an AngularJS controller. Snippet from Controller: $scope.popoverContent = {name: {title: "title", content: "content"}} S ...
I am facing a challenge in positioning the search bar on a background image, as well as placing a button at the bottom and center of the image. After that, I plan to include containers. My Goal https://i.sstatic.net/ZfYQj.png However, I am struggling an ...
I'm trying to align an image to the right side with a fixed position and have a large text content on the left side. I want the text content to be scrollable using bootstrap. Here is my code snippet. Thank you for your time and any suggestions! &l ...
While updating a website, I encountered an issue with the image slider displaying two images side-by-side. However, in Chrome, the images were not aligned properly as shown here: The website utilizes PHP and HTML to fetch data from a database and display ...
I recently came across an article on transitioning from using ngModel.$parsers and ng-if to ngModel.$validators and ngMessages by Todd Motto on his blog. Intrigued, I decided to migrate from using ng-if to ng-messages in my code. However, I encountered a s ...
I've been tasked with customizing a customer's website, and the admin has given me permission to use my own JavaScript file (myScript.js). How can I manipulate the iframe width from 160px to 200px using DOM Operations? <div id="iframeDiv& ...
<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...
Just starting out with Symfony2 and AngularJS. Trying to use json_encode to display content from my database, but running into issues. Here's my controller: public function catalogonewAction() { $data = $this->getDoctrine()->getManager() ...
I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a p ...
One feature on my website involves a content container that displays different information based on which list item is clicked (such as news, videos, blogs, etc.). This functionality is achieved by using jQuery's load method to bring in html snippets ...
After retrieving data from the database, which includes images and other fields, I am trying to figure out how to make it so that when users click on an image, it opens in a new window. Below is the code snippet I have: <a target="_blank" href="#"> ...
I am trying to modify the color of the active class in my HTML code as I create a nav sidebar. Here is the snippet from my code: <div class="col-sm-2"> <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked for vertic ...
https://i.sstatic.net/GYpNe.png I have created a dropdown select menu using AngularJS's ng-options. The selection and submission processes are functioning correctly. However, as shown in the image, the dropdown menu does not collapse as intended; it ...
I am having difficulty in choosing an option from a dropdown menu while using Selenium with Python. Displaying below is the HTML code snippet: <select class="hm-input hm-dropdown" type="text" id="HME-10-widget_calendar_1" ...
Some time ago I encountered the following code: HTML: <div align="center"> </div> CSS: div{ background-image: image here; background-position: center; background-size: 100% auto; max-width: 1920px; } Recently, I found ...
This particular image demonstrates a vertical menu that is expanded. I am looking to display only the parent tag initially and upon hovering, show the next level and so forth. function display_children($parent, $level, $categoryModel) { $result = $ca ...
By clicking on the button labeled Press Me, you can open a drop-down menu. Clicking on it again or anywhere in the window will close the menu. I want to synchronize this function with the dropdown-arrow located next to it as well. I attempted to give the ...