Burger Button Display Not changing [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want the burger to show up when my screen size is lesser than 1023px.
It is not happening only when using media query
.burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media only screen and (max-width: 1053px) {
.burger {
display: block;
}
}
<button
type="button"
class="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
But the burger icon is not appearing although I've tried creating burger from span and I tags

This seems to work perfectly for me when testing on codepen. Can you check how your stylesheet is connected in your HTML document, as in this piece of code.
<link rel="stylesheet" href="stylesheet.css"></link>
In the <head> section of your html document. I have a feeling that it might not be connected.
EDIT
html
<button
type="button"
id="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
CSS
#burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media screen and (max-width: 1053px) {
#burger {
display: block;
}
}

Related

I have made a scroll to top button but it doesn't display on mobile phone. Also I want to to show after 32 px how can I do that?

I have made a "scroll to top button" only using Html and CSS. It works perfectly.
The only problem is it also doesn't appear on mobile phone. I want to fix that. I also want it to display after certain pixels and even want to make it stay when the footer is displayed otherwise it hides behind the footer.
Html:
<!---Scroll to the top button-->
<section class="scroll">
</section>
<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i> </a>
<!--End of scroll to the top button-->
CSS:
.gotopbtn{
.gotopbtn{
position: fixed;
width: 50px;
height: 50px;
background: var(--lightersg);
bottom: 16px;
right: 2px;
text-decoration: none;
text-align: center;
line-height: 50px;
color: white;
font-size: 22px;
}
#media only screen and (max-width: 600px) {
#scroll {
display: none;
}
}
How to display this button on mobile phone? I tried using #media but it doesn't work.
I also tried display:flex but the button vanishes
I use javascript for showing button after scroll 32px
in such a way that I add a scroll event that I recognize the scroll and with a condition I recognize if scroll go over that 32px add .show class and otherwise remove .show class
HTML
<!-- height: 200vh; is just for create scroll in page -->
<section class="scroll" style="height: 200vh;"></section>
<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i></a>
CSS
.gotopbtn {
position: fixed;
width: 50px;
height: 50px;
background: var(--lightersg);
bottom: -66px;
right: 2px;
text-decoration: none;
text-align: center;
line-height: 50px;
color: white;
font-size: 22px;
transition: all 0.3s;
}
.gotopbtn.show {
bottom: 16px;
}
JS
let gotopbtn = document.querySelector('.gotopbtn');
window.addEventListener("scroll", (event) => window.pageYOffset >= 32 ? gotopbtn.classList.add('show') : gotopbtn.classList.remove('show'));

Error: How to toggle between hiding and showing [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
body {
margin: 0;
}
a{
text-decoration: none;
color: lightseagreen;
}
a:hover {
color: lightgray;
}
/* whole bar*/
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 9px 12px;
}
/* Menu*/
.navbar_menu {
display: flex;
list-style:none;
padding-left:0;
font-size: 33px;
font-family: initial;
}
.navbar_menu li {
padding: 8px 30px;
display: inline;
}
.navbar_icons {
letter-spacing:30px;
list-style: none;
display: flex;
flex-direction: row;
width: 200px;
color: lightgray;
font-size: 2em;
padding-left:0;
}
/* Icons */
.navbar__icons li {
padding: 8px 12px;
display: none;
}
/* Toggle button */
.navbar_toogleBtn{
position: absolute;
/*화면이 작아졌을때만 나타남*/
display: none;
right: 32px;
font-size: 24px;
}
/*For small screen */
#media screen and (max-width: 768px){
/* Nav container */
.navbar{
flex-direction: column;
align-items: center;
padding: 8px 24px;
}
/* Menu */
.navbar_menu{
display: none;
flex-direction: column;
align-items: center;
padding: 5px 10px;
justify-content: center;
}
.navbar_menu li{
width: 100%;
text-align: center;
display: block;
}
.navbar__menu a {
/* Fill in an entire line so that user can click on any space */
display: block;
}
/* Icons */
.navbar_icons {
justify-content: center;
display: none;
flex-direction: row;
width: 100%;
font-size: 1.5em;
}
/* Toggle button */
.navbar_toogleBtn{
display: block;
}
/* When toggle button is clicked - active state */
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bar.css" />
<title>first page</title>
<script src="https://kit.fontawesome.com/265fcd9b69.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<img src="logo.png" width="300" height="200">
</div>
<!-- Menu -->
<ul class="navbar_menu">
<!-- info.html, partner.html, free.html를 임의로 적어둠 -->
<li>Home</li>
<li>Information</li>
<li>Partner</li>
<li>Freelencer</li>
<li>Comunity</li>
</ul>
<!-- Icons -->
<ul class="navbar_icons">
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i></li>
<li><a href="register.html"><i class="far fa-registered"></i></li>
</ul>
<!-- Toggle button -->
<a href="#" class="navbar_toogleBtn">
<i class="fas fa-bars"> </i>
</a>
</nav>
<script type="text/javascript" src="bar.js" charset="utf-8" defer></script>
</body>
</html>
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
Im learning html/css/js from a Youtube video tutorial. Im learning how to write js code but i can't help to solve a problem. I hope you give me the solution guys.
The problem is about add.EventListener. i saw the code in chrome, in console it shows:
"bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null"
I would like to use toggle hide and show with JS.
You are getting this error ( "bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null" ) because you are specifying invalid element classes in js.
Use this:
const toggleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
Since your elements in html are:
<a href="#" class="navbar_toogleBtn">
...
<ul class="navbar_menu">
...
<ul class="navbar_icons">
Without seeing your code, it's hard to be specific as to what your issue is. Null is the absence of a value or object. When we call on a selector that does not exist, we can trigger the same error of null. Check if you are targeting an id that exists or that you are targeting the correct element using it's class.
Cross-reference your code to the following example to see if you may have missed something. This is the most basic of examples.
var box = document.getElementById('box');
document.getElementById('button').addEventListener('click', function(){
if( box.classList.contains('active') ){
box.classList.remove('active');
} else {
box.classList.add('active') ;
}
});
#button {
background-color: orange;
border: 1px solid #000;
color: #000;
padding: 0.5rem 1rem;
cursor: pointer;
}
#box {
margin-top: 2rem;
display: none;
padding: 1rem;
border: 1px solid #000;
}
#box.active {
display: block;
}
<button id="button">CLICK ME</button>
<div id="box">I am a box. Watch me.</div>

How do I align a button center of the web page? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to align this button centre of the web page; any ideas how to do that?
<button id="user-button" class="Sign-in"> Sign in </button>
<style>
.Sign-in{
background-color: springgreen;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
font-family: Lobster, helvetica;
}
</style>
Try wrapping the button in a div and giving that div a text-align property of center.
CSS:
#button-container {
text-align: center;
}
<div id="button-container">
<button>Center Me</button>
</div>

How to best code overlapping html buttons [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Here is what I'm trying to do:
overlapping buttons http://dev.960design.com/98a5fad8-c3ed-4014-a732-15145a233b83.png
I would like the red, blue and green areas to be clickable links without overlapping in an HTML5 web page. For example, if I hover my mouse or tap on the far right edge of the Blue 'B' circle, I do not want the green to be clicked. I would also prefer to have the 'white-space' between the links to be inactive ( hover:pointer would sort of 'blink' as you hover from red to blue to green ).
My initial thoughts: SVG buttons. No problem creating/implementing the svg buttons, but the clickable areas (viewbox?) is causing me problems.
So what is the best way of accomplishing this?
Here's my try with SVG...
<a href="#">
<svg>
<path id="button-svg-right" d="M0,100 L100,100 L100,0 L0,0 C27.6142375,0 50,22.3857625 50,50 C50,77.6142375 27.6142375,100 0,100 L0,100 Z"></path>
</svg>
</a>
Add a central absolute white <span> circle that is not a button.
Play with paddings, borders, till you get the desired sizes.
.btns{
position: relative;
height: 30px;
}
.btns button{
cursor:pointer;
outline: none;
border:none;
height: inherit;
width: 50px;
color: #fff;
font-weight:bold;
font-size:24px;
}
.btns button:hover{
opacity:0.7;
}
.btns > button:first-child{
background: red;
padding-right:20px;
}
.btns > button:last-child{
background: green;
padding-left:20px;
}
.btns span{
left: 32px;
position: absolute;
z-index:1;
width: 30px;
height: inherit;
border-radius: 50%;
background: #fff;
border: 5px solid #fff; margin-top:-5px;
}
.btns span button{
width: inherit; border-radius: inherit;
background: blue;
}
<span class="btns">
<button>-</button>
<span>
<button>B</button>
</span>
<button>+</button>
</span>

How to center navbar content after menu collapse? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am working on a website which needs to have two headers. The second header holds the social icons (facebook, twitter, linkedin, google plus) and next to them I have this heading:"Fast Social Login>>" .
Initially, with the css, I pulled them to the right. I am using the 'collapse' and 'navbar-collapse' classes for the heading because I don't want it to be shown on smaller screens. However, when this heading collapses, I want the social icons to be centered on the navbar.
Can this be solved with CSS adjustment or do I need to write scripts?
HTML:
<div class="navbar navbar-inverse navbar-static-top header-bottom-border">
<div class="container">
<img src="img/googleplus.png" class="social-position pull-right">
<img src="img/linkedin.png" class="social-position pull-right">
<img src="img/twitter.png" class="social-position pull-right">
<img src="img/facebook.png" class="social-position pull-right">
<div class="collapse navbar-collapse">
<h2 class=" navbar-text pull-right" style="color: #b0b0b0">FAST SOCIAL LOGIN>></h2>
</div>
</div>
</div>
CSS:
.header-bottom-border{
border-width: 0 0 5px 0;
border-color: #4c9322;
}
.social-position{
width: 3em;
height: 3em;
display:inline-block;
margin-left: 10px;
margin-top: 10px;
vertical-align: middle;
}
Have you tried using text-align: center with media query?
See the exact width when your navbar-collapse collapses, and write a query for that width.
#media (max-width: width-when-navbar-collapses) {
.container {
text-align: center;
a {
float: none;
}
}
}
Try this:
#media (max-width: width-when-navbar-collapses) {
.container a{
display: block;
width: 100%;
}
.container a img {
display: table;
margin: 0 auto;
}
}
Yes, this is possible by only using CSS, more specific, by using media-queries
Looking at the Bootstrap-source for the navbar, they use a media-query with a specific variable to change the behaviour of the navbar depending on the device-width:
#media (min-width: #grid-float-breakpoint)
Using a mobile-first approach, what you would need to do is set the social icons to be centered per default and override this using this media - query that targets the minimum width and above.
This could be achieved with something like in this example:
.navbar .container {
text-align: center;
.pull-right {
// you probably need to override these in here
float: none;
}
#media (min-width: #grid-float-breakpoint){
text-align: start ;
.pull-right {
float: right;
}
}
}
In case you're not using LESS (or any other preprocessor) and you have the compiled version of bootstrap in your project, the default-value of #grid-float-breakpoint is 768px, as defined here in the source

Categories