Developer Portal
HomeAPi References
HomeAPi References
  1. Global Css
  • Start Page
    • Intorduction
    • what Can We Develop in Emole
    • Testing Developing Apps And Code
    • Pricing And Recuring Payment
    • Emole Service Store
    • Join To Emole Services Provider
    • Snipped Code Section
      • Introduction
      • What is Snipped Codes Work With Emole Stores?
      • Emole Full Editor
      • Html Editor
        • What is Html Editor?
        • JavaScript and Css In Editor
        • Snipped Codes in Html Editor
        • Html Tags Develop in Editor
        • BootStrap in Html Editor
        • Using Html Editor
        • Libraries And Packages Used in Emole
      • Css Editor
        • what is Css Editor?
        • Css Editor By Store
        • Css Editor Configuration
        • Store Layout Structure
        • Css References
          • layout Structure Classes Names
          • Global Css
            • How To Change Reset CSS
            • How To Change Global CSS
            • How To Change Global Form CSS
            • How To Change Global (Cart Table, Data Table, Forum Table) Table CSS
            • How To Change Mobile Navigation CSS
          • Header And Footer Sections
            • How To Change Notification & Popup CSS
            • How To Change Header Admin Link CSS
            • How To Change Header CSS
            • How To Change Header Selector CSS
            • How To Change Header Link CSS
            • How To Change Header Lower CSS
            • How To Change Header Logo CSS
            • How To Change Desktop Menu CSS
            • How To Change Header Search Box CSS
            • How To Change Flyout Cart CSS
            • How To Change Footer CSS
            • How To Change Blocks CSS
            • How To Change Breadcrumb CSS
          • Catalog Css
            • How To Change Category Page CSS
            • How To Change Manufacturer Page CSS
            • How To Change Vendor Page CSS
            • How To Change Product Box CSS
            • How To Change Home Page Category CSS
            • How To Change Home Page Category CSS
            • How To Change Home Page Product View Per Row CSS
            • How To Change Product Details Page Product View Per Row CSS
            • How To Change Shopping Page Product View Per Row CSS
            • How To Change Pager CSS
            • How To Change Product Reviews CSS
          • Topics And Pages Css
            • How To Change Wishlist Page CSS
            • How To Change Compare Page CSS
            • How To Change Topic CSS
            • How To Change Contact Page CSS
            • How To Change Email A Friend Page CSS
            • How To Change Registation, Login & Account Pages CSS
            • How To Change Cart Pages CSS
            • How To Change Estimate Shipping Popup Common CSS
            • How To Change Shopping Cart Estimate Shipping CSS
            • How To Change Product Estimate Shipping CSS
            • How To Change Checkout Page CSS
            • How To Change Order Details & Shipping Details Pages CSS
            • How To Change Search Pages CSS
            • How To Change SiteMap Pages CSS
            • How To Change Blog Pages CSS
            • How To Change News Pages CSS
            • How To Change Forum & Profile Pages CSS
            • How To Change BB Codes CSS
      • Linked Snipped Code
        • Intorduction
        • Linked Snipped Code Types
        • Emole Linked Snipped Code Components
        • Linked Snipped Code Component Details
          • Linked Snipped Code Component Details Type
          • CategoryNavigation Details Component
          • CheckoutProgress Details Component
          • CustomerNavigation Details Component
      • Snipped Code Editor
        • Introduction
        • What is Widget Zoom
        • Common Widget Zooms
        • Mechanism for arranging elements
  1. Global Css

How To Change Mobile Navigation CSS

If you would like to customize/make changes Mobile Navigation in the CSS code

@media all and (max-width: 1000px) {
    .header-menu {
        position: relative;
        z-index: 1;
        width: 90%;
        max-width: 600px;
        margin: 0 auto 40px;
      }

      .menu-toggle {
        background: #4ab2f1 url('../images/menu-icon.png') right center no-repeat;
        padding: 15px;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
      }

      .top-menu {
        display: none;
      }

      .top-menu > li {
        position: relative;
        margin: 1px 0;
        background-color: #f6f6f6;
      }

      .top-menu > li > a {
        display: block;
        min-height: 55px;
        padding: 18px;
        font-size: 15px;
        color: #555;
      }

      .top-menu > li > a:focus {
        position: relative;
        z-index: 1;
      }

      .top-menu .sublist {
        display: none;
        background-color: #fff;
        padding: 5px 0;
      }

      .top-menu .sublist li {
        position: relative;
        margin: 1px 0 1px 20px;
      }

      .top-menu .sublist li a {
        display: block;
        padding: 15px 18px;
        font-size: 15px;
      }

      .sublist-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 55px;
        height: 55px;
        border-left: 1px solid #fff;
        background: url('../images/toggle-black.png') center no-repeat;
        padding: 15px;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        cursor: pointer;
      }

      .sublist .sublist-toggle {
        height: 49px;
      }

      .sublist .sublist li {
        background-color: #f6f6f6;
      }

      .sublist .sublist .sublist li {
        background-color: #fff;
      }

      .block-category-navigation {
        display: none;
      }

      .block-account-navigation {
        float: none;
        margin: auto !important;
      }

      .write-review .review-rating {
        text-align: center;
      }

      .write-review .review-rating div.name-description {
        width: 100%;
        margin: 0 5px 0 0;
        text-align: center;
      }
}
Previous
How To Change Global (Cart Table, Data Table, Forum Table) Table CSS
Next
How To Change Notification & Popup CSS