How can I add a menu-icon when I scale a page down below 769px? 

I added a button a one page site that I am developing in order to display the menu on mobile devices.

Used this in jquery:

```
if($(window).width() < 769){
    $('html').append('<i class="fa fa-bars menu-icon" aria-hidden="true"></i>');
}

```

The menu shows up if initially start the site with a window of size below 769px..but if I load the page on a big screen and try to resize the window to a width below 769,the menu-icon does not show up immediately.Instead I have to refresh the page for it to appear.

Thanks in advance
['https://Stackoverflow.com/questions/40102145', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/6354757/']
Because the script you run just runs once... on page load I guess. Why would it react on resizing the window? You dont specify that in your script.

Its far easier to just add the icon in the original html and display/ hide it with [css media queries](https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries):

```
.menu-icon { display: none; }

@media (max-width: 768px) {
  .menu-icon { display: block; }
}

```

Its also possible to [detect mobile devices via css](https://stackoverflow.com/questions/14942081/detect-if-a-browser-in-a-mobile-device-ios-android-phone-tablet-is-used), not just based on the window width.
You have to put your code inside `$(window).resize()` like follows so that whenever page size gets modified; the handler will get invoked and you can run your logic accordingly:

```
$('html').append('<i class="fa fa-bars menu-icon" aria-hidden="true"></i>'); //append the icon to html
$("i.fa-bars.menu-icon").hide(); //hide it initially

$(window).resize(function() {
    if($(window).width() < 769){
        $("i.fa-bars.menu-icon").show(); //show it on mobile view
    }
    else
    {
        $("i.fa-bars.menu-icon").hide(); //hide it on bigger screen
    }
}).trigger('resize');//firing the resize immediately

```