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

 

Bill

 
Replies
  • 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 {

    display:none;

    }

    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>

     

         <ul class="desktop">

         <li>menu 4</li>

         <li>menu 5</li>

         <li>menu 6<li>

         <li>menu 7</li>

         </ul>

     

    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