I have an element which drops down when I toggle my menu bars.
I can make the element as large or as small as I like but can't make it fit to screen so it doesn't scroll and no page shows underneath. It's a WordPress site and I started off with an an i class fa-bars. It wasn't possible to animate font awesome so I replaced it with this.
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1"
onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
<script>
function myFunction(x) {
x.classList.toggle('change');
}
</script>
</div>
This worked to toggle the menu amd make it drop but it didn't cover the screen. The element controlling the dropdown area was too small so I enlarged it by increasing height, like so:
#media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}
This made it too high but making it any lower would show the page underneath.
Is there a way I can modify my existing javascript or css to make it fit to screen exactly, responsively with no scroll and no page showing underneath?
It's located in my header.php so it would go there I'm assuming, if there's a way to modify what i already have. If not, what's a good way to approach this?
here on mobile
Html dropdown.
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>
I've tried applying min-height to element collapse max- height and 100% None worked.
Here's a pen https://codepen.io/adsler/pen/bGVXNVM
You can used position: fixed to size the element with respect to the frame:
.your-selector {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This will make it take up the entire window. It's not clear if you're wanting it to cover the window in all dimensions, but you can choose where the top/bottom/left/right anchor selectively.
If you're also wanting to make the body (or if it's not the body some other scrollable element) non-scrollable, set the overflow style to hidden.
Related
I'm working on this website - https://sampledemos.online/training/dashboard.html in which the toggle menu is hiding the content when menu expands.
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme active">
<div class="app-brand demo">
<a href="index.html" class="app-brand-link">
<img class="logo" src="/training/images/weblogo.jpg">
</a>
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
<i class="bx bx-chevron-left bx-sm align-middle" onclick="openNav()"></i>
</a>
</div>
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
<!-- Dashboard -->
<li class="menu-item active">
<a href="course-master-list.html" class="menu-link">
<i class="menu-icon tf-icons bx bxs-book-reader" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Course Master"></i>
<div data-i18n="course">Course Master</div>
</a>
</li>
and am using javascript as below
<script>
function openNav() {
$(document).ready(function () {
$('#layout-menu').toggleClass('active');
});
}
</script>
Below I have used styles like this...
#layout-menu.active {
width: 64px;
}
.active~.layout-page {
padding-left: 65px !important;
}
.app-brand .layout-menu-toggle {
position: absolute;
left: 15rem;
border-radius: 50%;
}
.active .layout-menu-toggle {
left: 4rem;
}
```
Is there I missed anything in my codings...
If I understand your question correctly then what's happening is that your plugin 'perfect scrollbar' is setting adding the class 'ps' to <ul class="menu-inner py-1 ps"> which adds overflow: hidden !important. That means everything that falls outside that menu-inner container is hidden. If you check your element inspector and remove the overflow: hidden you'll see your toggle menu becomes visible.
I have a function like so which toggles my dropdown menu.
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>.
</div>
</a>
</div>
<script>
function myFunction(x) {
x.classList.toggle('change');
document.body.style.overflow ='hidden'
}
</script>
The last part of it
document.body.style.overflow = 'hidden'
Keeps the page from overflowing at the top when the dropdown menu is open. The problem is that when I click on my menu bars, whilst the overflow disappears, clicking on the bars again reveals the page but locks it due to the overflow being hidden.
I'd like to undo
document.body.style.overflow = 'hidden'
When the menu is closed and the closest I've got to understanding it is the function doBack. Can I somehow add doBack to my existing function?
Mobile page here
It's a WordPress site and the javascript above toggles the dropdown by pressing on the bars. In order to extend the dropdown, I made the class collapse bigger, like so.
#media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}
HTML:
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>
You can eliminate the style attribute by using:
document.body.style.overflow = null
You can simply add a new CSS class:
.body-overflow {
overflow: hidden;
}
and in your javascript function add another .classList.toggle() but this time on the body:
function myFunction(x) {
x.classList.toggle('change');
document.body.classList.toggle('body-overflow');
}
I have a responsive website that contains a navigation slider that is closed (off-screen) by default. This includes a vertical push/pull bar that is always visible on the screen to open and close the menu. The entire navigation slider is fixed on the page with a scrollbar on the menu.
When the menu is open on smaller devices, it takes up 100% of the viewport width. To accommodate this, I also add a top margin to the body content of 100vh to push it off the bottom. When a user clicks a menu item, it should take them to the link and automatically close the menu. I'm attempting to do this with an event listener on the menu items. If clicked, it removes the active class that controls the display when the menu is open. Currently, it takes the user to the link, but does not close the menu.
I know that the event listener works (to some degree) because if I change the body to display:none instead of margin-top:vh, clicking the menu item closes the menu, but, of course, it does not take the user to the link. I am aware that this is because the body content was displayed until after the link was clicked, which is why I'm trying to handle this with margin-top instead of display.
What am I missing? I've searched for an answer to this, but I can't seem to find anything that addresses this particular issue. I am pretty inexperienced in JavaScript, so any help is greatly appreciated.
$(document).ready(function() {
var mquery = window.matchMedia("(max-width:767.98)");
$('#toggle-bar').on('click', function() {
$('#sidebar').toggleClass('active');
});
if (mquery.matches) {
$('.menu-item').on('click', function() {
$('#sidebar').removeClass('active');
});
}
});
.sidebar {
display: flex;
width: 100%;
position: fixed;
max-height: 100vh;
margin-left: calc(-100% + 25px);
/*to keep .sidebar-toggle in the view*/
}
.sidebar.active {
margin-left: 0;
}
.sidenav {
overflow-y: scroll;
}
.sidebar-toggle {
width: 25px;
}
.sidebar #navpush {
display: none;
}
.sidebar.active #navpush {
display: inline;
}
.sidebar.active #navpull {
display: none;
}
.body-content {
padding: 15px;
}
.sidebar.active~.body-content {
margin-top: 100vh;
}
<div class="container body-wrapper">
<aside class="sidebar" id="sidebar">
<nav class="sidenav">
<ul id="main-nav">
<li>Section 1</li>
<li>Section 1
<ul id="sect1nav" class="collapse submenu">
<li>Section 2A</li>
<li>Section 2B</li>
</ul>
</li>
<li>Section 3</li>
</ul>
</nav>
<div class="toggle-bar" id="toggle-bar">
<div id="nav-toggle">
<span id="navpush">«</span>
<span id="navpull">»</span>
</div>
</div>
</aside>
<div class="container body-content">
<div id="section1">
<h2>Section 1 Title</h2>
<div>
<!-- Content -->
</div>
</div>
<div id="section2">
<h2>Section 2 Title</h2>
<div id="section2a">
<h3>Section 2A Title</h3>
<div>
<!-- Content -->
</div>
</div>
<div id="section2b">
<h3>Section 2B Title</h3>
<div>
<!-- Content -->
</div>
</div>
</div>
<div id="section3">
<h2>Section 2 Title</h2>
<div>
<!-- Content -->
</div>
</div>
</div>
</div>
The issue is caused by lack of units in the media query:
Fixed code (note the addition of "px" at the end):
var mquery = window.matchMedia("(max-width:767.98px)");
Pre-edit: Your HTML markup does not contain elements with ID "sidebar" (#sidebar) or "toggle-bar" (#toggle-bar).
I've used this code for my navbar :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
Link
</li>
<li>
Link
</li>
<li class="dropdown">
Dropdown<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Something Here
</li>
<li>
Something else here
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Link
</li>
</ul>
</div>
</nav>
The above code is for simple navbar example. As I'm new to stackoverflow and have less reputation so I can't add images to my question.
Simple hover I can make using CSS but I wanted to make a hover in which if the cursor goes to any item on the navbar there is a effect like color water is filling in a glass.
Also I'm very curious about how to make the end of the section or div a little slant with some angle.
Please refer to the following link for reference:
This the template for reference
I'm trying to make a navbar and end of a section exacty like this template.
The template you refer to creates the bottom "slant" with the following CSS:
.section {
position: relative;
}
.section:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: -195px; /* the height of your image */
left: 0;
z-index: -1;
height: 195px; /* the height of your image */
background: url(path/to/your/image.png) no-repeat 50% 0%;
}
I am using Bootstrap affix property to display a header after scrolling to 100px. It works fine when I set opacity property to 0.0001 etc. but when I set it to 0 or display to none. It stops working. Here is a working demo with opacity property - http://jsfiddle.net/gu33f5cm/.
One issue with setting opacity is that it still takes up space in the document and the document appears to be blank at the location of header. This is my CSS code:
CSS:
#nav.affix {
position: fixed;
top: 0;
width: 100%;
transition: 0.6s all;
}
#nav.affix-top {
opacity:0.1;
}
HTML:
<div class="container" data-spy="affix" data-offset-top="100" id="nav">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12"> <a class="brand" href="#">Home</a>
<ul class="nav">
<li class="active">Home
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</div>
</div>
What version of bootstrap are you using? In v3.3.5 there is a separate nav class which works as you require.
http://getbootstrap.com/examples/navbar/