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/
Related
Here is my current CSS-only dropdown menu html:
<div class="main-nav">
<div class="main-nav-container">
<div class="nav-links">
<ul>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="nav-link"><a>Nav Link</a>
<div class="dropdown">
<ul class="dropdown-list-type">
<li>
<ul>
<li>
Option
</li>
<li>
Option
</li>
<li>
Option
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
Relevant CSS:
.dropdown{
position: absolute;
display: flex;
top: 100%;
border-top: solid 1px var(--white-3);
left: 0;
z-index: 8;
opacity: 0;
pointer-events: none;
transition: .3s; }
.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
transform: translate(0, 0);
opacity: 1;
pointer-events: auto;
}
On mobile, I want the user to be able to open and close the dropdown by tapping on the "Nav Link". Currently, the user can tap to open, but then has to tap somewhere else to close the dropdown. I figure I need Javascript make it do what I want.
My idea:
Use a media query to remove the hover function on mobile
Use Javascript to add a class to the "Nav Links" on mobile
Using this class, with JS, make the Nav Links toggle the dropdown to display/hide
Is this the best way to do it? If so, how do I add a class to the "Nav Links" with Javascript at a specific screen size?
I would like to just use plain Javascript, no Jquery.
Also, I current want to keep the CSS-only hover approach for desktop. So I want the Javascript function only for the mobile view.
I hope that makes sense to everyone. Thank you!
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 this problem: I'm making header with responsive size, so when the width less than 1199px, user can see hamburger menu. To open/close menu, I'm using React Hooks and it changes display: block / none. But it has to work only when the screen is less than 1199px, but in my case it works every time, and obviously my header has display: none and there's nothing on page (there's only my logo)
Component's code:
const Header = () => {
const [navBar, showNavBar] = useState(false)
const useNavBar = () => {
showNavBar(!navBar)
}
return (
<header class="header-area main-header">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="logo-area">
<a href='#'><img src={logo} alt="logo"/></a>
</div>
</div>
<div class="col-lg-10">
<div onClick={useNavBar} class="custom-navbar">
<span></span>
<span></span>
<span></span>
</div>
<div class="main-menu">
<ul style={navBar === true ? {display: 'block'} : {display: 'none'}}> // problem is here
<li class="active">home</li>
<li>about us</li>
<li>schedule</li>
<li>trainers</li>
<li>blog
<ul class="sub-menu">
<li>Blog Home</li>
<li>Blog Details</li>
</ul>
</li>
<li>contact</li>
<li>pages
<ul class="sub-menu">
<li>Service</li>
<li>Elements</li>
</ul>
</li>
<li class="menu-btn">
book now
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
);
}
SASS code:
.main-menu
ul
float: right
#include desktop()
display: none
float: left
position: absolute
top: 60px
right: 0
z-index: 4
background: $dark
width: 40%
padding: 20px 20px 30px
PS: I don't want to add all of my CSS code, because it's over 200 strings, just explain me how to change display using media queries in my case
Don't use inline style. Change class names with JavaScript.
Set the display in your stylesheet based on the class name and media queries.
<ul className={navBar === true ? "foo" : "bar"}>
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%;
}