Display different content depending on viewport width

Question

As you can see on my website, my horizontal navigation menu is too long to fit on the same line as the logo when viewing the page with an iPad.

Therefore I'd like to shorten the menu items based on the viewport width (i.e. use "Coaching" instead of "Espace Coaching" if the viewport width is <= 768px. Is it possible? Is there a JS plugin for this? (haven't found anything on google)

Please include the relevant code directly in the question instead of just linking to a website. When the problem is solved, your website will no longer be a useful resource for anyone with the same problem. — ArtOfCode, Jun 29 '14 at 16:10
No plugin but there are several ways of doing this. One is javascript or jquery, writing the menu item with js based on device width. Secondly, you can use css content to fill in the menu items and that css could use @media query to differ on various viewports. — Godinall, Jun 29 '14 at 16:12

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

Here is a really simple answer: http://jsfiddle.net/r5Ft9/4/

Use CSS like this:

@media screen and (min-width: 0px) and (max-width: 799px) {
  .hide-on-small { display: none;}
}

And HTML like this:

<h1><span class="hide-on-small">Espace </span>Coaching</h1>

Also, the following SO question has code snippets with CSS media query breakpoints: Common CSS Media Queries Break Points

edited May 23 '17 at 10:26

Community

1
1

answered Jun 29 '14 at 16:12

Mark Silverberg

1,249
2
8
21

Display different content depending on viewport width

1 Answers1