0
Welcome Guest! Login
0 items Join Now

SOLVED Mobile menu css

    • eRimkus's Avatar
    • eRimkus
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

    SOLVED Mobile menu css

    Posted 10 years 11 months ago
    • www.texas-web-designs.com/duc
      Joomla 3.2.3
      Gantry 4.1.24
      Gantry template 4.1.24
      RokNavMenu 2.0.7

      I've made some menu buttons with css and have that setup for the different screen sizes down to phone width. When the phone view menu appears by pressing the menu button, it doesn't look like the out-of-the-box tree menu structure. I've mucked it up somewhere along the way.

      How do I get back to the tree structure view of the mobile phone menu so I don't have the blue backgrounds on the menu words and the menu items don't appear side by side but rather stacked in a list.

      It can be difficult to see the dropdown css in Firebug when there is more than a screen full of css snf I cannot have the mouse in 2 places at the same time. One to hover over the dropdown and another to scroll through the css in Firebug.

      Any assistance is greatly appreciated.

      TIA,
      Ed
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED Mobile menu css

    Posted 10 years 11 months ago
    • Put all your CSS that restyles the menu inside media queries so it does not apply at phone size.
      /* Smartphones */
      @media (max-width: 480px) {
      
      }
       
      /* Smartphones to Tablets */
      @media (min-width: 481px) and (max-width: 767px) {
        
      }
        
      /* Tablets */
      @media (min-width: 768px) and (max-width: 959px) {
         
      }
        
      /* Desktop */
      @media (min-width: 960px) and (max-width: 1199px) {
       
      }
       
      /* Large Display */
      @media (min-width: 1200px) {
           
      }

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • eRimkus's Avatar
    • eRimkus
    • Sr. Rocketeer
    • Posts: 168
    • Thanks: 2

    Re: SOLVED Mobile menu css

    Posted 10 years 11 months ago
    • Wow that was fast! Thank you. Will do. Now why didn't that occur to me? Too close to the trees...

Time to create page: 0.053 seconds