Longer Menu text display issue #3016

3 Answer(s)

• 

  0

  mahmut.gundogdu created 4 years ago

  There is a multiple solution. 1- You can wrap the text next line.

  |Add CSS in your styles.css in angular.

  .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li > a > span.lp-text,
  .lp-closed.lp-extended .lp-sidebar .lp-sidebar-navi ul li a span.lp-text {
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
  
   # Optional 
   .lp-opened-sidebar .lp-sidebar .lp-sidebar-navi ul li > a > span.lp-text,
   .lp-closed.lp-extended .lp-sidebar .lp-sidebar-navi ul li > a > span.lp-text {
    line-height: 18px;
  }
  
  

  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  mahmut.gundogdu created 4 years ago

  Solution 2:

  change/override the sidebar width. add these code to styles.scss/css

  :root {
    --lpx-width: 400px;
    --lpx-grid: 24px;
  }
  .lp-opened-sidebar .lp-sidebar {
    width: var(--lpx-width);
  }
  
  body.lp-opened-sidebar .lp-content {
    padding-left: calc(var(--lpx-width) + var(--lpx-grid));
  }
  
  .lp-closed.lp-extended .lp-sidebar {
    width: var(--lpx-width);
  }
  
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  mahmut.gundogdu created 4 years ago

  Solution 3:

  Wait and update new lepton X (Lepton X is beta now. It will release soon). It uses CSS variables, and users can easily override the values.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel