Im using Bootstrap 4 and for some reason the scroll to div function is only working on mobile phone/smaller screen sizes.
Javascript code:
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
Navbar link:
<li class="nav-item">
<a class="nav-link" href="#about-us"><button type="button" class="btn btn-green">About</button></a>
</li>
Div:
<div class="about" id="about-us">
<div class="container">
test
</div>
</div>
navbar-brand class is overlapping the navbar-nav.So add z-index to the navbar-nav in your html page i.e
<ul class="navbar-nav ml-auto" style="z-index:1;">
You can add following to your css file:
.navbar-brand.mx-auto {
width: 216px;
right: 0;
left: 0;
}
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.
This has been asked a million times. I have tried every single solution I found here, but none of them worked for me.
I have this navbar:
<div>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark hidden-sm" id="navbar">
<ul class="navbar-nav" id="navToHide">
<li class="nav-item active">
<a class="nav-link" href="#quemsou" id="link1">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="link">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="" href="#" id="burguerDrop"><i class="fa fa-bars" style="font-size:40px; color:white;"></i></a>
</li>
</ul>
</nav>
</div>
And this jQuery/JS:
$(document).ready(function() {
if (document.documentElement.clientWidth > 480) {
$("#navbar").addClass("fixed-top");
$("#burguerDrop").hide();
} else {
$("#navbar").removeClass("fixed-top");
$("#navToHide").hide();
$("#burguerDrop").show();
}
});
I can't hide my nav on mobile no matter what. I can't hide the nav or the nav-links. But I can hide and show my 'burguerDrop'. My 'buguerDrop' is working fine, though it's not displaying on my computer web browser. However, it is displaying on mobile exactly how I wanted.
But in the other elements, I can't do the same. I have no idea why. I have tried using both "css('display', 'none');" AND "hide();". None of them works to hide my navbar, but both of them works to display my burguerDrop.
I have absolutely no idea why this is happening.
Note: As per the other answers and comments this can be done more cleanly with either CSS styling or using built in Bootstrap classes.
To answer your original question: The main thing you were missing is showing and hiding elements in the right places.
I've re-factored your code so you can make use of the window.resize event:
function setupMobile() {
if (document.documentElement.clientWidth > 480) {
$("#navbar").addClass("fixed-top");
$("#burguerDrop").hide();
$("#navToHide").show();
} else {
$("#navbar").removeClass("fixed-top");
$("#navToHide").hide();
$("#burguerDrop").show();
}
}
$(document).ready(setupMobile);
window.addEventListener('resize', setupMobile);
And here is a demo on Codepen to show this solution in action.
Since you already using bootstrap, why dont you simply use css breakpoints.
.navToHide {
display: none;
}
#include media-breakpoint-up(sm) {
.navToHide {
display: block;
}
}
There is a purely CSS way of doing this. Position sticky basically allows an element to scroll in its parent element. If you want to hide the burger icon you can just do a display: none on a media query like below.
#navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
}
#media screen and (min-width: 480px) {
#burguerDrop {
display: none;
}
}
Here's the codepen for this:
https://codepen.io/jeffteachestheweb/pen/YzZEqRq
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 problem with changing the position of an element using margin-top property.Element is inside bootstrap navigation end the problem is that it changes the margin on scroll properly,but whan I scroll page back to top,it doesnt change margin-top back to hire value.Here is my code:
JS
$(".flags").css("margin-top", "24px");
$(window).scroll(function(){
var scrollingDiv = $(".flags").offset().top - $(window).scrollTop();
var menuMmainScroll = $(".navbar-nav>li>a").offset().top - $(window).scrollTop();
if(menuMmainScroll === 68) {
$(".flags").css("margin-top", "24px");
}
else /**if(menuMmainScroll < 10)**/ {
$(".flags").css("margin-top", "10px");
}
console.log(menuMmainScroll);
});
<div class="menu_main">
<div class="navbar yamm navbar-default">
<div class="navbar-header">
<div class="navbar-toggle .navbar-collapse .pull-right " data-toggle="collapse" data-target="#navbar-collapse-1" > <span>Menu</span>
<button type="button" > <i class="fa fa-bars"></i></button>
</div>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse pull-right">
<nav>
<ul class="nav navbar-nav">
<li class="dropdown">Home
<ul class="dropdown-menu" role="menu">
<li>Forside</li>
<li class="active">Ny til Yoga</li>
<li><a href="#holdplan" data-scroll>Holdplan</a></li>
<li><a href="#priser" data-scroll>Priser</a></li>
<li><a href="#kontakt" data-scroll>Kontakt</a></li>
<li>Butik</li>
<li>Medlem log ind</li>
</ul>
</li>
<li>Holdplan</li>
<li>Priser</li>
<li>Ny til yoga</li>
<li class="dropdown">Om Yoga
<ul class="dropdown-menu" role="menu">
<li>Mysore metode</li>
<li>Om Astanga yoga</li>
<li>About</li>
<li>Services</li>
<li>Services</li>
<li>Services</li>
</ul>
</li>
<li>Mysore </li>
<li>Studiet</li>
<li>Butik</li>
<li><div class="dropdown-toggle flags"> !!!!!!!!!!!!!!!!!!!!!!
<a href="#" class="flag-link"><img src="UK_flag.png" alt="English">
</a>
<a href="#" class="flag-link"><img src="DK_flag.png" alt="Danish">
</a>
</div> !!!!!!!!!!!!!!!!!!</li>
</ul>
</nav>
</div>
</div>
I have put ! at the beginning and end of troublesome part in HTML
Basicly in the beggining there is another menu on top of this one(whan page isnt scrolled,but whan the scrolling starts this menu takes over top position and stays fixed at the top.Now the problem is that I am using div with to images inside two links that are not display properly inline,but inline with some 24px above others in its own field,hoping this makes any sence.
thanks for any help guys.
Try editing the code in your scroll function to the below:
var menuMmainScroll = $(window).scrollTop();
if(menuMmainScroll === 0) {
$(".flags").css("margin-top", "24px");
}
else {
$(".flags").css("margin-top", "10px");
}
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%;
}