0

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

user agent
  • 2,762
  • 6
  • 29
  • 74

2 Answers2

2

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:

.menu-icon { display: none; }

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

Its also possible to detect mobile devices via css, not just based on the window width.

Community
  • 1
  • 1
Alex
  • 9,339
  • 2
  • 28
  • 46
  • @Alex.I Preferred not to use display:none because it can be bad for SEO I assume, since it will still pick up as a hidden content.Hope you can correct me there if am wrong. – user agent Oct 18 '16 at 07:50
  • @WosleyAlarico no, its just a hidden icon... its even better regarding seo reasons since google for instane recognizes your site is mobile friendly. it is absolutely best practice – Alex Oct 18 '16 at 07:51
  • @WosleyAlarico all the big frameworks, like bootstrap for example, do it like that :) thats what media queries are for! – Alex Oct 18 '16 at 07:52
  • Really appreciate the explanation.Thanks. then I'll prefer that since it is simpler than having to use jquery. – user agent Oct 18 '16 at 07:53
  • @WosleyAlarico no problem, youre welcome. though, you should REALLY know that when doing websites... – Alex Oct 18 '16 at 07:54
  • @ Alex.That is actually what I normally do.Was just trying the js because of te SEO concern that I just taught me. – user agent Oct 18 '16 at 07:57
1

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
vijayP
  • 11,262
  • 5
  • 21
  • 37
  • 1
    this would add an icon every time you resize the window beneath the specified width – Alex Oct 18 '16 at 07:35
  • 1
    now youre simulating css media queries with a width detection for every pixel resized. this is not performant and not necessary – Alex Oct 18 '16 at 07:40
  • @Alex - I agree...! – vijayP Oct 18 '16 at 07:41
  • I tried that but the problem is that it will only add when you resize the page.If I open the page immediately on mobile view,the button will never show up because because one can never resize on mobile. And also,in your answer you used the .hide() function.Would that not be bad for SEO? Thanks in advance – user agent Oct 18 '16 at 07:47
  • @WosleyAlarico - updated the code bit to deal with the issue you were facing on mobile device. I really can't judge about your SEO concern...! – vijayP Oct 18 '16 at 07:51
  • Well I can still vote for the answer too since I learned from it too.By the way I'll research more about how to use the trigger function since am still a beginner in js and don't know how to play with such yet. – user agent Oct 18 '16 at 07:55
  • @WosleyAlarico - sure. Thanks...! – vijayP Oct 18 '16 at 07:57