Bollate

HTML

[ANSWERED] javascript – Burger Button Display Not changing

By

Nov 18, 2022 , , , ,

Solution 1 :

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"
        >
          &#9776;
</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;
   
    }
}

Problem :

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"
>
  &#9776;
</button>

But the burger icon is not appearing although I’ve tried creating burger from span and I tags

Comments

Comment posted by jsfiddle.net/ho8z9s0p

it seems to work fine:

Comment posted by kushagra-aa

hey rory thanks for responding, but my stylesheet is connected correctly, the other pieces of code seems to work properly only this button code is not working,

Comment posted by Rory L

Hmm. Try this as a last resort then. Edited my above answer

Comment posted by kushagra-aa

not working buddy;)

Comment posted by Rory L

Ah crud. If you have this committed to a github repo I’d be happy to take a look. I’m really stumped at why this doesn’t work, and I have a feeling it could be a small typo somewhere rather than a big problem.

Comment posted by kushagra-aa

i have its old version that was not responsive,I haven’t committed the new one yet as it is unstable

By

Related Post

HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022
HTML

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022
HTML

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022