I have a problem with the Bulma framework. I have a small navbar for desktop and want to add a navbar burger. But it doesn't work. I tried the js script created by Bulma as an example and one from a yt video. Both didn't work. Can somebody Please help me? Down will find the html part and the js script:
js/index.js
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
index.html
<script src="js/index.js"></script>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<h1 class="title">10.8</h1>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu" id="navMenu">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<!-- navbar items -->
</div>
</div>
</div>
</nav>
Well if watched a small video produced from Bulma, tried the code from theire website and watched another video. I also tried to write my own script but it also does'nt work.
I hope sb can help me to fix it cause this must be successfully really quick.
You have a div that doesn't close in the right place.
There is a div with duplicate className.
Properly closing and removing that div everything works as expected.
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet"/>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<h1 class="title">10.8</h1>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<!-- navbar items -->
</div>
</div>
</nav>
</body>
Related
So, what I want to do is open a URL that I am providing in href and at the same time open a new html page. On button click it leads to the URL in a new window with target="_blank". But what I want to do is open the link in the new window and also open a new HTML page in the previous window.
Below is my code,
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<button class="primary download">
<a id="buttton1" class="buttton7" target="_blank" href="example.com">Download</a>
</button>
</div>
</li>
Something like this
Test page
The click will open a new window with the data-href and change existing window with href
window.addEventListener("load", function() {
document.getElementById("button1").addEventListener("click", function() {
window.open(this.getAttribute("data-href"), "_blank")
})
})
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<a id="button1" class="primary download button7"
data-href="https://example1.com"
href="https://example2.com">Download</a>
</div>
</li>
You need to use window.open() method.
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<button class="primary download">
<a onclick="window.open('http://google.com');" id="buttton1" class="buttton7" href="https://www.w3schools.com" >Download</a>
</button>
</div>
</li>
You can use This
<button onclick="window.location.href='page2.html'">Go to another page in your folder</button>
or you can use a link like that
<button onclick="window.location.href='https://example.com/'">Go to another page in an URL</button>
Below should do the job:
<a onclick="window.open('http://google.com');" id="buttton1"
class="buttton7" href="http://yahoo.com">Download</a>
No need of _blank since window.open() does that for us, while the current window updates its location from href attribute
<!DOCTYPE html>
<html>
<body>
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<button class="primary download">
<a id="buttton1" onmouseup="window.location.replace('/blank.html');" class="buttton7" target="_blank" href="example.com">Download</a>
</button>
</div>
</li>
</body>
</html>
I'm looking to add a button after a specific element on an existing page. This is the code I've tried so far.
$('.collection-nav').after('<span class="button">This is a button.</span>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="index-navigation collection-nav" role="navigation">
<div class="collection-nav-item" data-url-id="process">
<a href="/process/" class="process">
<span class="collection-nav-item-span">Process</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="our-breads">
<a href="/our-breads/" class="our-breads">
<span class="collection-nav-item-span">Bread</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="ourculutre">
<a href="/ourculutre/" class="ourculutre">
<span class="collection-nav-item-span">Culture</span>
</a>
</div>
<div class="collection-nav-item" data-url-id="about">
<a href="/about/" class="about">
<span class="collection-nav-item-span">About</span>
</a>
</div>
</nav>
Anything I'm missing here?
as far as I can see, the code you wrote is correct, but it needs to be triggered to work.
you can add a button like this => <button id="btnAfter">After Element</button>
you can try again later your code:
$('#btnAfter').click(function(){
$('.collection-nav').after('<span class="button">This is a button.</span>');
})
I'm trying to design my webpage so that the navigation bar color changes to match the section that the user is reading.
For example when the user is on a red section, the nav bar should be red etc.
Nota: I'm using bulma as a css library.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet"/>
<html class="has-navbar-fixed-top">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<nav class="navbar is-fixed-top is-transparent" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-transparent">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu is-transparent">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<p class="title">
Green Fullheight hero with navbar
</p>
</div>
</div>
</section>
<section class="hero is-link is-fullheight">
<div class="hero-body">
<div class="container">
<p class="title">
Blue Fullheight hero with navbar
</p>
</div>
</div>
</section>
</html>
Edit :
The navigation bar should be changed when the user is scrolling down or top.
A similar behavior is used by dropbox for their homepage :
https://www.dropbox.com/
My solution :
Consists of making the navigation bar transparent :
.navbar {
background-color: transparent;
background-image: none;
}
You need to add some jquery to add and remove required classes
$(document).ready(function(){
$("#blue").mouseover(function(){
$(".navbar").addClass("is-link");
});
$("#blue").mouseout(function(){
$(".navbar").removeClass("is-link");
})
});
Here is the working demo of your code and only I'v added functionality to blue section.
demo
Actually my question is clear but many people just down voted without even telling why. Hopefully I figured out the answer myself. The solution is to make the navigation bar background transparent with css only. No JavaScript needed :
.navbar {
background-color: transparent;
background-image: none;
}
I have a bootstrap website. At first, my links were concatenating (e.g. if I were to click on the home index page three times it would show instastatus.live/index.html/index.html/index.html) every time I clicked a link.
The issue has been solved, but now the link won't go through. For example, if I click one of the nav bar items such as "Services", the URL shows the correct address: instastatus.live/services/index.html. However, it won't go to the page until I click on the URL bar and hit enter (only then will it take me to the appropriate page). Otherwise, it does nothing.
<nav class="cb-navbar">
<div class="cb-container">
<div class="cb-navbar-inner">
<div class="cb-navbar-left">
<a href="index.html" class="cb-navbar-back">
<i class="cb-icon -long-arrow-left"></i>
</a>
</div>
<div class="cb-navbar-right">
<div class="cb-navbar-nav">
<a href="/services/index.html" id="navbar-services" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -cog"></i>
</span>
<span class="cb-navbar-nav-item-text">Services</span>
</a>
<a href="/projects/index.html" id="navbar-projects" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -bars"></i>
</span>
<span class="cb-navbar-nav-item-text">Projects</span>
</a>
<a href="/contacts/index.html" onclick="yaCounter.reachGoal('contacts')" id="navbar-contacts" class="cb-navbar-nav-item">
<span class="cb-navbar-nav-item-icon">
<i class="cb-icon -contacts"></i>
</span>
<span class="cb-navbar-nav-item-text">Contacts</span>
</a>
</div>
</div>
</div>
</div>
</nav>
I have this Li tag which shows notification dropdown in my bootstrap theme but the problem is if there is no content inside this li tag then also it is shown with 300px height, I have tried removing that height also but still no luck. How can I resize this li tag if there is no content inside it.
Content is shown in media-body tag
<li class="dropdown navbar-notification">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu">
<div class="dropdown-header">
<span class="title">Notifications
<strong>(0)</strong>
</span>
</div>
<div class="dropdown-body niceScroll">
<div class="media-list small">
<a href="" class="media">
<div class="media-object pull-left"><i class="fa fa-ban fg-danger"></i>
</div>
<div class="media-body">
<span class="media-text">No new Notification</span>
<!-- Start meta icon -->
<span class="media-meta"></span>
<!--/ End meta icon -->
</div>
<!-- /.media-body -->
</a>
</div>
</div>
<div class="dropdown-footer">
See All
</div>
</div>
</li>
$(".navbar-notification .niceScroll").mouseover(function() {
$(".navbar-notification .niceScroll").niceScroll({
cursorwidth: '10px',
cursorborder: '0px'
}).resize();
});
You can select empty element by css :empty selector and hide it:
element:empty {
display: none;
}