When viewing the website on a mobile device, the menu appears as a toggle button. However, on desktop, the menu is displayed without the toggle. Is there a way to show the menu in a toggle button on the desktop version using Bootstrap?
When viewing the website on a mobile device, the menu appears as a toggle button. However, on desktop, the menu is displayed without the toggle. Is there a way to show the menu in a toggle button on the desktop version using Bootstrap?
$('.hamberger').click(function() {
$('.hamberger-navbar').toggleClass('active-left');
});body {
margin: 0;
list-style-type: none;
}
header,
nav {
display: block;
}
.container-fluid {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background-color: #795548;
height: 50px;
float: left;
}
#navbar {
position: relative;
float:left;
height: 50px;
text-align: center;
}
#navbar ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#navbar li {
float: left;
display: block;
height: 19.5px;
}
#navbar a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#navbar li a {
float: left;
display: block;
padding: 15px;
background-color: #795548;
text-align: center;
font-style: verdana;
}
.hamberger {
display: none;
}
.hamberger {
position: absolute;
top: 30px;
right: 15px;
z-index: 999999;
padding: 10px 35px 16px 0;
cursor: pointer
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
content: "";
position: absolute;
display: block;
width: 35px;
height: 3px;
border-radius: 1px;
border-color:#ffffff;
background: #ffffff;
cursor: pointer;
}
.hamberger span:before {
top: -10px;
}
.hamberger span:after {
bottom: -10px;
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
transition: all 300ms ease-in-out;
}
.hamberger.active span {
background-color: transparent
}
.hamberger.active span:before,
.hamberger.active span:after {
top: 0;
}
.hamberger.active span:before {
transform: rotate(45deg);
}
.hamberger.active span:after {
top: 10px;
transform: translatey(-10px) rotate(-45deg);
}
@media (max-width: 1024px){
.hamberger-navbar {
position: fixed;
left: -300px;
width: 300px;
transition: all 0.5s;
}
.hamberger-navbar.active-left {
left: 0;
position: relative;
}
.hamberger-navbar.active-left:after {
position: fixed;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
#navbar {
float: none;
height: auto;
position: relative;
z-index: 99;
margin-top: 50px;
}
#navbar ul {
width: 100%;
float: none;
}
#navbar li {
float: none;
height: auto;
width: 100%;
}
#navbar li a {
float: none;
}
.hamberger {
float: left;
margin: 17px 0 0 10px;
position: fixed;
top: 0;
left: 20px;
display: block;
}
}
@media (max-width: 991px){
.hamberger-navbar {
position: fixed;
left: -300px;
width: 300px;
transition: all 0.5s;
}
.hamberger-navbar.active-left {
left: 0;
position: relative;
}
.hamberger-navbar.active-left:after {
position: fixed;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
#navbar {
float: none;
height: auto;
position: relative;
z-index: 99;
margin-top: 50px;
}
#navbar ul {
width: 100%;
float: none;
}
#navbar li {
float: none;
height: auto;
width: 100%;
}
#navbar li a {
float: none;
}
.hamberger {
float: left;
margin: 17px 0 0 10px;
position: fixed;
top: 0;
left: 20px;
display: block;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container-fluid">
<div class="hamberger">
<span></span>
</div>
<nav id="navbar" class="hamberger-navbar">
<ul>
<li><a class="active">Home</a></li>
<li><a class="navigation">About Us</a></li>
<li><a class="navigation">Products</a></li>
<li><a class="navigation">Header Style</a></li>
<li><a class="navigation">Blogs</a></li>
<li><a class="navigation">Contact Us</a></li>
</ul>
</nav>
</div>
</header>Take a look at this useful information.
I have a modal pop up that appears after clicking an ASP button : <div class="form-group"> <asp:Button ID="btnBrand" runat="server" Text="Add brand" CssClass="btn btn-info" OnClick="btnAdd_Click" /> </div> Code Behind : protected ...
I am currently working on a project that requires JWT authentication. I have set up a registration form and login page where users receive an authorityToken and it is saved in localStorage. Once the user logs into their account : ` $("#btnLogin").click( ...
Currently, I am attempting to implement this AngularJS example from a tutorial on Login Tutorial Example. Instead of storing the username and password as simple strings, I am trying to retrieve them from a local file. I understand that this may not be the ...
Having trouble passing values from a PHP file to another function in Javascript. Even after a successful FOR LOOP, nothing seems to work within the SUCCESS block. Any suggestions? url1 = 'http://localhost:81/Dashboard/admin/inc/dashboard.php'; $ ...
Is it possible for the sidebar to remain static until it is reached by scrolling on the page? I want it to be positioned below the Jumbotron and then stick to the left and top when scrolling down. Currently, it's overlapping everything and adjusting z ...
Hello, I am new to Node.js so please be patient with me. I am struggling to figure out how to retrieve the selected option from a drop-down list after a user submits it and then perform an action based on that choice. Here is an example of what I have in m ...
After doing some research, I decided to revise the question after receiving feedback that it was causing some concern. When a checkbox is clicked, the content of the corresponding div should be visible and vice versa. How can I achieve this? Thank you. JQ ...
My JSON file structure is as follows: { "rID": "1", "rFI": "01", "rTN": "0011", "rAN": "11", "sID&quo ...
Initially, my project included angular, angular-bootstrap, and jquery in the package.json file, with everything being compiled using browserify. // package "dependencies": { "angular": "~1.4.6", "angular-bootstrap": "~0.12.2", "jquery": "~2.1. ...
I am working on developing my Java skills by creating a custom browser. Is there a way to adjust the size and shape of the address bar, which is currently implemented as a JTextField with Swing's default settings? Here is the code snippet I am using: ...
I have created a basic HTML webpage with a fullscreen background video (not set to loop) using the Vide plugin. Everything is working well, but I want the video to pause on the last frame to showcase a logo I have included at the end. This functionality w ...
Below are the codes I am using to send an email with an attachment: if (isset($_POST['submit'])) { @$name=stripslashes($_POST['name']); @$last_name=stripslashes($_POST['last_name']); @$phone=stripslashes($_POST['phone&a ...
As a beginner, I am facing an issue with a URL that contains Persian language characters. For instance: http://tabnak.ir/fa/news/577155/ویدیوی-درگیری-نیروهای-سیا-و-پنتاگون-در-سوریه-با-همدیگر-ویدیوهایی ...
Seeking a solution for fixing divs with text in CSS. I am aware of the background-attachment: fixed; property which creates a fancy effect. Is there a similar property to "fix" divs with text or how can this be achieved in Typescript? Your insight would be ...
I am trying to implement an animation on an element within a page when the user is transitioning out of a state. Here is my current code snippet: { ....., views: { ... }, onExit: function(){ someEle.classList.remove("someClass"); // ...
There seems to be an issue with the layout of my menu as one item is displaying lower than the others without any clear reason. <html> <head> <title> My Website Homepage </title> </head> <body> ...
I am looking to implement a color box that opens without a popup and only shows/hides inside a specific div. Is it possible to target a div to open the colorbox content? <a href='#myGallery' class='group'>click here</a> &l ...
Having trouble getting the ajaxSend and Stop functions to work properly. I understand that these are global variables, but for some reason I am not able to use them as intended. I never receive an alert when trying to use them in my code. I was hoping to ...
When retrieving my article from the database as a JSON object, I encounter an issue with the body content. The HTML codes in the body are displayed as strings within double quotation marks by AngularJS. How can I resolve this? Angular controller snippet: ...
Apologies for the confusing title, I struggled to come up with something more fitting. Let's say my client needs a square area on their homepage where they can upload images that will be placed within various boxes in a grid. The available box optio ...