4 Replies Latest reply on Mar 22, 2013 12:08 PM by elainecc

    drop navigation links to 2 lines for phone size

    shadowfax007 Level 1

      Hi everyone, Happy Thursday (Or brain dead Thursday for me)!

       

      I'm working on a new "responsive" project.  Being a new project, I'm starting with the smallest width and working my way up.

      I have a simple navigation at the top of the page with six text "roll-over" links.

       

      On the smaller size (smart phone - 320px), I need to "wrap" the text links to 2 lines, then one line for all the rest of the larger sizes.  I also need to move a graphic that is directly below the links down to accomodate for the extra line, then back up again when the window size changes.  For some reason, I can't figure how to go about doing this.  Also, the navigation will be added to an existing HTML page when completed.

       

      My question is:

            How do I tell Edge to move the nav from two lines of text to one line (and move the graphic) when I hit a particular window size (media query)?

       

      I will have media queries set up in the CSS for the HTML portion of the page.  Could I simply "show/hide" a particular div, one with the two lines for the nav and one with one line using CSS, or is there a better way?

       

      If it is possible to do the "show/hide" div idea, would it be better (or even possible) to make different navigation animations for each media queries (where needed)?

       

      Sorry about my temporary (I hope!) "brain dead" condition :-)

       

      James