500px-767px mobile display appear TWO vertical menus rather one

in development of a responsive web design,… in vertical menu 8-rows what is the trick at 100% display width,… in 320px-499px mobile display appear a vertical menu 8-rows but in 500px-767px mobile display appear TWO vertical menus(propably one continued in 5th li tag to second row) 4-rows each 50% each of display…?

I do NOT mean for media query syntax(i know well this), but for alignment of li elements css syntax… well?

Hi,

Do you have an example of where you have seen this so we can dissect it for you?

I can think of various ways of making two lists into one such as setting 50% width on the list elements so that they are floated side by side and then at small screen widths make them 100% so they fall vertically. Or you could use two separate uls with both blocks floated but at 50% width on larger screens and then 100% width and not floated on smaller screens so that the second block lines up underneath.

Or (although a little wasteful) you could have two unique menus with different structures and hide one or the other at the various screen width as required by the media query. A lot of mobile sites do this and display a menu button instead of a whole menu.

http://georgiosrafaelavilla.com/example.html have a look

http://georgiosrafaelavilla.com/css/3col-wide-footer.css

Hi,

Sorry I missed your reply yesterday.

Is that link the site you are working on or just one that displays the issue you want to mimic?

If you can clarify which lists should be side by side then I’ll take another look but it will obviously involve a media query at some stage to change the property/values as required.

tell me code for this url example.html

yes i know media query needed so provide the code. that said is that i know media query theory not to explain to me. just create a media query 480<x<768, and put css in it…

I’ll need the html that you want to be used for this task and if you answer the points in my last reply.:slight_smile:

<ul class=“navLinks”>
<li><h1 style=“padding:5px”><a href=“…/index.htm”>Home Page</a></h1></li>
<li><a href=“…/description.htm”>Description</a></li>
<li><a href=“…/prices.htm”>Prices</a></li>
<li><a href=“…/book.php”>Book/Quote Get</a></li>
<li><a href=“…/availability.htm”>Availability</a></li>
<li><a href=“…/photos.htm”>Photos</a></li>
<li><a href=“…/location.htm”>Location/Maps</a></li>
<li><a href=“…/terms.htm”>Terms</a></li>
</ul>
etc css get from INSPECT ELEMENT - CHROME