0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

Remove one step of responsiveness

  • Remove one step of responsiveness

    Posted 11 years 1 month ago
    • Hi,
      I have a main menu which is in header top and which have 6 elements. The template is responsive and when the screen is large, medium or small there is no problem, but there is a step between desktop and tablet that can handle only 4 menu element, then I reduce the width of my navigator the last menu element go below the 5 others elements and the first element is on the logo. I would like to get rid of this step or reconfigure it to use the phone/tablet menu and logo. Exemple: www.pwrstation.com
      Thanks in advance
    • cdavis411's Avatar
    • cdavis411
    • Preeminent Rocketeer
    • Posts: 17787
    • Thanks: 882

    Re: Remove one step of responsiveness

    Posted 11 years 1 month ago
    • add this to your custom css file
      /* 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) {
      body .gf-menu.l1 li.parent > .item {padding-right: 20px;}
      body .gf-menu.l1 > li > .item {padding: 0 6px;font-size: 0.8em;}
      body .gf-menu li.parent > .item:after {right: 5px}
      }
      
      /* Desktop */
      @media (min-width: 960px) and (max-width: 1199px) {
      body .gf-menu.l1 li.parent > .item {padding-right: 20px;}
      body .gf-menu.l1 > li > .item {padding: 0 7px;}
      body .gf-menu li.parent > .item:after {right: 5px}
      }
      
      /* Large Display */
      @media (min-width: 1200px) {
      }

Time to create page: 0.064 seconds