Skip navigation
Currently Being Moderated

Fluid Grid - different nav bars for each layout

Feb 21, 2013 9:33 PM

Tags: #dreamweaver #cs6 #fluid_grid_layout #navigation_bar_problems

Since the mobile layout is so narrow I would like to have an abbreviated navigation bar for the mobile layout and a full navigation bar for the other layouts.


I am using an unordered list <ul> styled with category>block> display:block

For the mobile layout I want only "about, services, products and contact."

For the other layouts I want "home, about me, services, products, and contact me."


If I change the list on one layout it transfers to the other layouts. 


Any suggestions as to how to get around this?


Thanks in advance for your help



  • Currently Being Moderated
    Feb 21, 2013 11:04 PM   in reply to RoseCityMktg

    You can hide the unwanted LI's in mobile view.

    This will not reflect in Tablet and Desktop view.


    Which version of DW are you using ?

    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 12:09 AM   in reply to RoseCityMktg

    Is the version 12.2 ?


    I presumed that in your unordered list tag 'UL' you would be having List elements 'LI'

    LI's = List elements.


    Create a class

    Add it to mobile media section of CSS.


    .hide {



    Apply it on the List element you want to hide.


    Ensure that in tablet and desktop section of Media CSS the display:  block; in you Id selector or class selector , I.e whatever is being used.

    Mark as:
  • Currently Being Moderated
    Feb 22, 2013 11:09 AM   in reply to RoseCityMktg

    Give your lists an ID or Class name

         <ul class="mobile">

         <li>menu 1</li>

         <li>menu 2</li>

         <li>menu 3</li>



         <ul class="desktop">

         <li>menu 4</li>

         <li>menu 5</li>

         <li>menu 6<li>

         <li>menu 7</li>



    In your CSS, use a media query to target the mobile devices:


    /* Special Rules for Mobile */

    @media only screen and (max-width: 480px) {

    .desktop {display:none}




    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points