www.webdeveloper.com
Results 1 to 11 of 11

Thread: Selecting different content in a media query

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210

    Selecting different content in a media query

    I am writing code for responsive navigation and have run into a problem.

    My client insists on using sentences for their navigation buttons rather than just single words. This forced me to put the words on two lines on the navigation bar. This works fine for any screen above 800 pixels wide.

    I have written a media query for screen resolutions less than 800 pixels, and while the two lines are shown it would look a lot better if the words were not on two lines on smaller screens.

    My questions is; is there a way to reference different content from within a media query, or is there another solution to this problem?

    What I would like to do is have another list of navigation items that do not have a "<br>" which makes two lines out of the navigation items when viewed on screen sizes less than 800 pixels wide.

    Here is a link to the website: http://www.lawrence-nv.us/Rnav

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    Wanting to have 2 separate navigation elements (one for mobile and one for widths greater than 800 pixels) is something that has been done by many websites in responsive design. Some people actually recommend doing this for several elements on the page as it allows you to specifically cater some of the content and design based on the user's screen size. It just becomes a matter of hiding the 'mobile' version on higher resolutions and showing the 'desktop' version, and then vice versa when the resolution hits a minimum threshold. As far as referencing this, there isn't anything special because you'll have two separate elements on the page. One will be hidden by default.

  3. #3
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Sup3rkirby View Post
    Wanting to have 2 separate navigation elements (one for mobile and one for widths greater than 800 pixels) is something that has been done by many websites in responsive design. Some people actually recommend doing this for several elements on the page as it allows you to specifically cater some of the content and design based on the user's screen size. It just becomes a matter of hiding the 'mobile' version on higher resolutions and showing the 'desktop' version, and then vice versa when the resolution hits a minimum threshold. As far as referencing this, there isn't anything special because you'll have two separate elements on the page. One will be hidden by default.
    This is true, but to the best of my knowledge, this technique only allows you to change the style of what is being presented on the different width monitors through different CSS.

    Using a media query based on CSS, I don't know of any way to reference different a different html file which would contain different navigation content (the same words, but without the <br> which breaks up the single line into two lines).

    Am I missing something here?

  4. #4
    Join Date
    Mar 2014
    Location
    Corpus Christi, TX
    Posts
    88
    You may just have to bite the bullet and create two separate nav images/maps. Have your client review before spending a lot of time on it.

  5. #5
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by TW79 View Post
    You may just have to bite the bullet and create two separate nav images/maps. Have your client review before spending a lot of time on it.
    I don't mind generating two different versions of the navigation. What I am wondering is how to select the second version with a media query.

    This particular client if very picky, and I can already guess they will say the two line navigation buttons on a iPhone is not what they want.

    I already tried to talk them into changing the wording of the navigation buttons so I would not have to put each one on two separate lines. They won't budge on this point.

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,031
    Sorry, I guess I didn't explain myself clearly.

    So essentially what you'll do is create two <nav> elements on the same page (no need for multiple HTML files with the different content). By default, one of these elements will be hidden. When the page resizes (or loads on a smaller device) a media query will determine which version of the nav to show.

    So you will have something like this in your HTML:
    HTML Code:
    <nav class="showDesktop">
        <ul>
            <li> <a href="#"> Home</a></li>
            <li> <a href="#"> What is a<br>Q Painting</a>
                 <!--<ul>
                    <li><a href="#">Sub Menu 1</a></li>
                 </ul>
    
                 <ul>
                    <li><a href="#">Sub Menu 2</a></li>
                 </ul>-->
            </li>
            <li> <a href="#"> About the<br>Author and Artist</a></li>
            <li> <a href="#"> About<br>Our Collection</a></li>
            <li> <a href="#"> More info<br>on Ordering</a></li>
            <li> <a href="#"> Contact<br>Us</a></li>
        </ul>
        <div class="handle">Menu</div>
    </nav>
    
    <nav class="showMobile">
        <ul>
            <li> <a href="#"> Home</a></li>
            <li> <a href="#"> What is a Q Painting</a>
                 <!--<ul>
                    <li><a href="#">Sub Menu 1</a></li>
                 </ul>
    
                 <ul>
                    <li><a href="#">Sub Menu 2</a></li>
                 </ul>-->
            </li>
            <li> <a href="#"> About the Author and Artist</a></li>
            <li> <a href="#"> About Our Collection</a></li>
            <li> <a href="#"> More info on Ordering</a></li>
            <li> <a href="#"> Contact Us</a></li>
        </ul>
        <div class="handle">Menu</div>
    </nav>
    And then something like this in your CSS:
    Code:
    .showMobile { display: hidden; }
    
    @media only screen and (max-width: 800px) {
    	.showDesktop { display: hidden; }
    	.showMobile { display: block; }
    }
    And so what should happen is the two different versions of this nav get switched out based on the resolution.

  7. #7
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Sup3rkirby View Post
    Sorry, I guess I didn't explain myself clearly.

    So essentially what you'll do is create two <nav> elements on the same page (no need for multiple HTML files with the different content). By default, one of these elements will be hidden. When the page resizes (or loads on a smaller device) a media query will determine which version of the nav to show.

    So you will have something like this in your HTML:
    HTML Code:
    <nav class="showDesktop">
        <ul>
            <li> <a href="#"> Home</a></li>
            <li> <a href="#"> What is a<br>Q Painting</a>
                 <!--<ul>
                    <li><a href="#">Sub Menu 1</a></li>
                 </ul>
    
                 <ul>
                    <li><a href="#">Sub Menu 2</a></li>
                 </ul>-->
            </li>
            <li> <a href="#"> About the<br>Author and Artist</a></li>
            <li> <a href="#"> About<br>Our Collection</a></li>
            <li> <a href="#"> More info<br>on Ordering</a></li>
            <li> <a href="#"> Contact<br>Us</a></li>
        </ul>
        <div class="handle">Menu</div>
    </nav>
    
    <nav class="showMobile">
        <ul>
            <li> <a href="#"> Home</a></li>
            <li> <a href="#"> What is a Q Painting</a>
                 <!--<ul>
                    <li><a href="#">Sub Menu 1</a></li>
                 </ul>
    
                 <ul>
                    <li><a href="#">Sub Menu 2</a></li>
                 </ul>-->
            </li>
            <li> <a href="#"> About the Author and Artist</a></li>
            <li> <a href="#"> About Our Collection</a></li>
            <li> <a href="#"> More info on Ordering</a></li>
            <li> <a href="#"> Contact Us</a></li>
        </ul>
        <div class="handle">Menu</div>
    </nav>
    And then something like this in your CSS:
    Code:
    .showMobile { display: hidden; }
    
    @media only screen and (max-width: 800px) {
    	.showDesktop { display: hidden; }
    	.showMobile { display: block; }
    }
    And so what should happen is the two different versions of this nav get switched out based on the resolution.
    Thank you, thank you. I would never in a million years thought of doing it this way.

  8. #8
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Or... you could even try doing something like this
    Code:
    nav ul br {
        display: none;
    }
    @media only screen and (max-width: 800px) {
        nav ul br {
            display: inherit;
        }
    }
    Toggle the <br>s to display: none;
    Thus, reducing the need to have duplicate navbars.

    EDIT: this works
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    nav ul br {
    	display: inherit;
    }
    @media (min-width: 800px) {
    nav ul br {
    	display: none;
    }
    }
    </style>
    </head>
    <body>
    <nav>
      <ul>
        <li>foo<br>
          bar</li>
      </ul>
    </nav>
    </body>
    </html>
    Last edited by ShrineDesigns; 05-08-2014 at 06:06 PM.

  9. #9
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by Sup3rkirby View Post
    Sorry, I guess I didn't explain myself clearly.

    So essentially what you'll do is create two <nav> elements on the same page (no need for multiple HTML files with the different content). By default, one of these elements will be hidden. When the page resizes (or loads on a smaller device) a media query will determine which version of the nav to show.

    So you will have something like this in your HTML:
    HTML Code:
    <nav class="showDesktop">
        <ul>
            <li> <a href="#"> Home</a></li>
            <li> <a href="#"> What is a<br>Q Painting</a>
                 <!--<ul>
                    <li><a href="#">Sub Menu 1</a></li>
                 </ul>
    
                 <ul>
                    <li><a href="#">Sub Menu 2</a></li>
                 </ul>-->
            </li>
            <li> <a href="#"> About the<br>Author and Artist</a></li>
            <li> <a href="#"> About<br>Our Collection</a></li>
            <li> <a href="#"> More info<br>on Ordering</a></li>
            <li> <a href="#"> Contact<br>Us</a></li>
        </ul>
        <div class="handle">Menu</div>
    </nav>
    
    <nav class="showMobile">
        <ul>
            <li> <a href="#"> Home</a></li>
            <li> <a href="#"> What is a Q Painting</a>
                 <!--<ul>
                    <li><a href="#">Sub Menu 1</a></li>
                 </ul>
    
                 <ul>
                    <li><a href="#">Sub Menu 2</a></li>
                 </ul>-->
            </li>
            <li> <a href="#"> About the Author and Artist</a></li>
            <li> <a href="#"> About Our Collection</a></li>
            <li> <a href="#"> More info on Ordering</a></li>
            <li> <a href="#"> Contact Us</a></li>
        </ul>
        <div class="handle">Menu</div>
    </nav>
    And then something like this in your CSS:
    Code:
    .showMobile { display: hidden; }
    
    @media only screen and (max-width: 800px) {
    	.showDesktop { display: hidden; }
    	.showMobile { display: block; }
    }
    And so what should happen is the two different versions of this nav get switched out based on the resolution.
    I just tried your code but ran into problems. With this code, both navigation bars were being displayed on both the large screen and the small screen. I changed the word "hidden" to "none" and the large screen displays properlynow, but the navigation on the small screen completely disappeared.

    I moved the code for this test to a new url which you can see here:
    http://www.lawrence-nv.us/Rnav2

    Unfortunately I have never had to use the technique of hiding things in CSS before so I don't know the details on how they work.

    EDIT:

    I found my problem. I had placed ".showMobile { display: none; }" in the wrong place.
    Last edited by lkeeney; 05-08-2014 at 06:29 PM.

  10. #10
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    ShrineDesigns,

    Thanks for this tip.

    I'm presently trying to get Sup3rkirby's code to work, but will try this tip also.

    This is as important a learning experience for me as much as it is in getting my code to work properly. I like learning new ways to solve problems. I have been using CSS for years, but never to this extent in solving problems.

  11. #11
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Yea, CSS3 offers a LOT compared to CSS2.x.
    CSS media queries offer a practical means of dealing with edge-case scenarios, without having to resort to JavaScript for a solution.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles