Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Sliding menu css



  • wondering if someone can help me under the default css themes the slideing menu has the dividers (borders) between the list items however if i take the css code from the example template and put it in the css to overide the style those dont show up on my phone any more they still show in firefox on the pc thou I even tried making the borders thicker which works in firefox but still no show on the phone

    heres my css for the menu

    .page--menu-page__background {
      background-color: #1e1e1e;
      color: white;
    }
    
    .menu-close,
    .menu-close > .toolbar-button {
      color: #999;
    }
    
    .menu-list,
    .menu-item:first-child,
    .menu-item {
      background-color: transparent;
      background-image: none !important;
      border-color: transparent;
      color: #fff;
    }
    
    .menu-item {
      padding: 0 0 0 20px;
      line-height: 52px;
      height: 52px;
      text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
    }
    
    .menu-item:active {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .menu-notification {
      display: inline-block;
      margin-top: 12px;
      font-size: 14px;
      height: 16px;
      line-height: 16px;
      min-width: 16px;
      font-weight: 600;
    }
    
    .bottom-menu-list,
    .bottom-menu-item:first-child,
    .bottom-menu-item {
      border-color: #7792a9;
      background-color: #242424;
      background-image: none !important;
    border-width:2px 0px 2px 0px;
      color: #ccc;
    }
    
    .bottom-menu-item:active {
      background-color: #7792a9;
      
      )
    
    

    Thanks