I am a big fan of the off canvas feature in Bootstrap 3, as seen here: http://getbootstrap.com/examples/offcanvas/. However, for a current project, I would like to customize it so that it overlaps the content instead of pushing it to the side. Is this doable? If yes, could you guide me on how to achieve this?
By "overlapping," I mean:
update (after considering your comment and new sketch)
Take a look at:
html:
<div class="container">
<div class="row">
<div class="col-sm-9" style="background-color:lightgreen;height:500px;">
Content
<button id="navigator">Show Nav</button>
</div>
<div class="sidenav col-sm-3" style="background-color:red;height:100px;">Nav</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div><!--/.container-->
css:
@media (max-width: 767px)
{
.sidenav
{
position: absolute;
top: 50px;
height: 0px;
width: 0px;
overflow: hidden;
left:100%;
padding:0;
}
.sidenav.on
{
width:50%;
left:50%;
-webkit-transition: all 2s ease 0s;
-moz-transition: all 2s ease 0s;
-o-transition: all 2s ease 0s;
transition: all 2s ease 0s;
}
}
javascript:
$('#navigator').click(function(){$('div.sidenav').toggleClass('on');});
--
Indeed, check out:
The off canvas feature is not a standard element of bootstrap. This demonstration illustrates the capabilities of Bootstrap, css, mediaqueries, and javascript (jQuery).
1) Media queries hide the sidebar when the screen width is under 768px (css with negative right position) 2) Clicking the button adds the class .active to the content (including the sidebar) 3) Css positions the content with class .active to the left with ...% (positive right position), hiding the content (outside the viewport) and revealing the navbar. 4) The show/hide effect is achieved using CSS3 transitions http://www.w3schools.com/css3/css3_transitions.asp
In the original example, if you change the content's width from 50% to 100% (or slightly more), it will create an overlap effect.
You may also want to refer to: Toggle sidebar on mobile device with Twitter Bootstrap 2.x (can be easily adapted for TB3)
For the canvas body class, you can easily adjust the overflow to visible by adding the following code:
your content<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c978a978a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e0fbe6fbe6">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#Sidebar" aria-controls="Sidebar">
toggle ofcanvas
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="Sidebar" aria-labelledby="SidebarLabel">
<div class="offcanvas-header">
<h3 class="offcanvas-title" id="SidebarLabel">Clothes</h3>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body overflow-visible">
<div>
<h4>Categories</h4>
<p>You're one stop shop for all your clothing needs!</p>
</div>
<div class="dropdown mt-3 d-flex flex-column">
<div class="btn-group dropend my-2">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Men
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Shirts</a></li>
<li><a href="#" class="dropdown-item">Pants</a></li>
<li><a href="#" class="dropdown-item">Shoes</a></li>
<li><a href="#" class="dropdown-item">Accessories</a></li>
<li><a href="#" class="dropdown-item">Underwear</a></li>
<li><a href="#" class="dropdown-item">Socks</a></li>
</ul>
</div>
<div class="btn-group dropend my-2">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Women
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Shirts</a></li>
<li><a href="#" class="dropdown-item">Pants</a></li>
<li><a href="#" class="dropdown-item">Shoes</a></li>
<li><a href="#" class="dropdown-item">Accessories</a></li>
<li><a href="#" class="dropdown-item">Underwear</a></li>
<li><a href="#" class="dropdown-item">Socks</a></li>
<li><a href="#" class="dropdown-item">Dresses</a></li>
<li><a href="#" class="dropdown-item">Skirts</a></li>
</ul>
</div>
<div class="btn-group dropend my-2">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Kids
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">Shirts</a></li>
<li><a href="#" class="dropdown-item">Pants</a></li>
<li><a href="#" class="dropdown-item">Shoes</a></li>
<li><a href="#" class="dropdown-item">Accessories</a></li>
<li><a href="#" class="dropdown-item">Underwear</a></li>
<li><a href="#" class="dropdown-item">Socks</a></li>
</ul>
</div>
<div class="btn-group dropend my-2">
<a href="#" class="btn btn-danger">Sale!</a>
</div>
</div>
<form action="#" method="POST" class="my-3">
<div class="form-group">
<label for="min" class="form-label">min Price</label>
<input type="number" name="min" id="min" class="form-control">
<label for="max" class="form-label">max Price</label>
<input type="number" name="max" id="max" class="form-control">
</div>
<div class="form-group my-3">
<button type="submit" class="btn btn-primary">Filter</button>
</div>
</form>
</div>
</div>My NodeJS server application is up and running smoothly, thanks to the implementation of route protection I learned from an informative tutorial. After successfully obtaining a working token for login purposes, I decided to apply a middleware that would se ...
One of my requirements is to display the click percentage for each link in an HTML template that is dynamically fetched from a database. I attempted to show the click percentage for each anchor link by adding them to the `data-title` attribute using jQuery ...
I'm currently facing a challenge as I try to align one specific navbar link to the right. More specifically, in this scenario, I want only the logout link to be on the right side of the nav bar. I've experimented with various solutions such as us ...
I've encountered an issue with styling a triangle element using the .something:hover .another{...} selector. Can anyone help me understand what might be causing this problem? .actions { display: flex; margin-top: 20px; max-width: 260px; } .a ...
I'm currently working on a website where I've implemented a map that calculates the distance from the current location. The map is functioning properly, but now I'm trying to add text below it and running into an issue with overlap. To see ...
I have a task where I need to retrieve data from two different API endpoints. Once both sets of data are fetched, I need to compare the information obtained from each source. I am familiar with fetching data from a single API endpoint and using a callback ...
I have a React application where I am making API calls. To manage these calls, I created a separate file called dataService.js to contain all the functions for interacting with the API. However, when trying to log the data in my component, I am getting a ...
In the top screenshot, you can see a representation of my Pixel 6XL connected to my laptop in USB debug mode. The checkered area represents the URL bar on the Chrome browser displayed on my Pixel device. Below that, the second screenshot shows the view fr ...
I'm currently working on developing a straightforward pagination filter for Angular, which can be implemented as shown below: <ul> <li ng-repeat="page in items | paginate: 10"> <ul> <li ng-repeat="item in p ...
I am encountering a peculiar issue, which is not unexpected considering my limited experience with JavaScript. I am currently working on developing a basic high-low card game where two cards are drawn and the highest card wins. Below you can find the code ...
Having two arrays at hand, array1 requires sorting based on its inner key, role, as per array2. Despite attempting various solutions, I have hit a roadblock due to my lack of understanding on the necessary steps to proceed. The current output for Array1 i ...
While working with AngularJS, I encountered an issue when trying to insert a new value into an existing JSON object. The error message I received was: "Object doesn't support property or method 'push'" Below is the code snippet I am using: ...
Currently, I am enrolled in a course on Udemy that focuses on building an app with ASP.NET Core and Angular from scratch (). Everything was going smoothly until I encountered an issue while trying to install ngx-bootstrap. After running the command npm in ...
I am struggling to modify the content of an SP Rich Text field using the WinForms web browser control. While changing the values of other controls is straightforward, I have encountered difficulties with Rich Text fields. I found some suggestions on this b ...
Sample HTML code: <div tile-component included-svg='::installController.installUpdatesSvg'></div> Install controller: **A scope variable named 'installUpdatesSvg' is defined** this.installUpdateSvg = 'xyzSvg'; ...
Currently utilizing the Ruby Selenium web driver, my goal is to extract content from the Google Knowledge Graph located on the top right-hand side of the search results page. This element is within the <div class="xpdopen"> section. @driver = Seleni ...
Hey there, I'm a new member and I've gone through the different Ajax Help topics but still can't figure out why my code isn't working. Here's what I have: $(document).ready(function(){ $.ajax({ type: "GET", ur ...
I am currently utilizing jquery.cookie v1.4.1 to set a cookie in the following manner: $.cookie('userCookie', $("#user").val()); The value returned by $("#user").val() is typically something like 'username' Now, within an angular app ...
I am currently utilizing the material-ui library to display a TextField component in my react application. Strangely, all instances of <TextField type="number /> are displaying decimal separators as commas (,) instead of dots (.), causing confusion f ...
After creating a ul element, I have customized the html and css for my navigation bar: Html: <ul id="list-nav"> <li><a href="Marsrutas.html">Item1</a> </li> <li><a href="Nuotraukos.html">Item2</a& ...