Developer Portal
HomeAPi References
HomeAPi References
  1. Header And Footer Sections
  • 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. Header And Footer Sections

How To Change Desktop Menu CSS

If you would like to customize/make changes Desktop Menu in the CSS code
@media all and (min-width: 1001px) {
/*** NAVIGATION ***/
  .header-menu {
    position: relative;
    z-index: 5;
    width: 980px;
    margin: 0 auto 30px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 25px 0;
    text-align: center;
  }

  .menu-toggle,
  .sublist-toggle {
    display: none;
  }

  .header-menu > ul {
    display: block !important; /* prevents toggle display:none on resize */
    font-size: 0;
  }

  .header-menu > ul.mobile {
    display: none !important;
  }

  .header-menu > ul > li {
    display: inline-block;
    border-left: 1px solid #ddd;
    padding: 0 15px;
    vertical-align: middle;
  }

  .header-menu > ul > li:first-child {
    border-left: none;
  }

  .header-menu > ul > li > a {
    display: block;
    padding: 5px 10px;
    line-height: 20px;
    font-size: 17px; /*reset zeroing*/
    color: #555;
    cursor: pointer;
  }

  .header-menu > ul > li > a:hover,
  .header-menu > ul > li > a:focus {
    color: #4ab2f1;
  }

  .header-menu .sublist {
    display: none;
    position: absolute;
    width: 200px;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
    background-color: #fff;
    padding: 10px 0;
    text-align: left;
  }

  .header-menu .sublist li {
    position: relative;
  }

  .header-menu .sublist li a {
    display: block;
    position: relative;
    padding: 10px 20px 10px 30px;
    font-size: 14px;
    color: #444;
  }

  .header-menu .sublist li a:before {
    content: "";
    position: absolute;
    top: 17px;
    left: 15px;
    width: 5px;
    height: 5px;
    background-color: #ddd;
  }

  .header-menu .sublist li:hover > a,
  .header-menu .sublist li:focus > a {
    background-color: #f6f6f6;
  }

  .header-menu ul li:hover > .sublist,
  .header-menu ul li:focus > .sublist {
    display: block;
  }

  .header-menu .sublist .sublist {
    top: -10px;
    left: 100% !important;
  }
}
@media all and (min-width: 1367px) {
/*** NAVIGATION ***/


  .header-menu {
    width: 1200px;
  }

  .header-menu > ul > li {
    padding: 0 20px;
  }

  .header-menu > ul > li > a,
  .header-menu > ul > li > span {
    font-size: 18px;
  }
}
Previous
How To Change Header Logo CSS
Next
How To Change Header Search Box CSS