Blazor Left Navigation - Separator Lines #5922

9 Answer(s)

• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Hello Spospisil You can override styles from index.html file like below

  Below is the pat for file

  You will see output like this with override css

  Markdown supported.

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

  Save Cancel
• 

  0

  Spospisil created 3 years ago

  Hi,

  Maybe you misunderstood. I want to programmatically add a seperator as I'm adding ApplicationMenuItem items to the menu within the menu itself. What you show is a divider between the menu navigation and the content. This is not what I am asking.

  Markdown supported.

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

  Save Cancel
• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Sorry for the inconvenience I will check and get back to you asap

  Markdown supported.

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

  Save Cancel
• 

  0

  Spospisil created 3 years ago

  Any update on this?

  Markdown supported.

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

  Save Cancel
• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Hello

  Do you mean to say like this ?

  

  Please confirm me on this or else please elaborate more on your question if possible.

  Thank you, Anjali

  Markdown supported.

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

  Save Cancel
• 

  0

  Spospisil created 3 years ago

  Correct. I want to programmatically add dividers to the left navigation menu at my discretion when adding menu items.

  Markdown supported.

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

  Save Cancel
• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Hello Spospisil,

  I have done this through css only. I have added this code in main.css

  .lpx-sidebar-container .lpx-nav-menu .lpx-menu-item-link {
      border-bottom: 1px solid black !important;
  }
  

  If you want to add style to particular menu item then you can give style by using its id just like below

  a#MenuItem_BlazorWasm2\.Home { /* at my side this is id for home menu item*/
      border-bottom: 1px solid white !important;
  }
  

  please do let me know if it helps you,

  Thank you, Anjali

  Markdown supported.

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

  Save Cancel
• 

  0

  Spospisil created 3 years ago

  The problem with this approach is that if there is if the # of items in the navigational menu are numerous and results in a scrollbar for the menu the dividing line shows as going right through that scrollbar.

  

  Markdown supported.

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

  Save Cancel
• 

  0

  Anjali_Musmade created 3 years ago

  Support Team Member

  Hello Spospisil Please add this code in main.css you can set the opacity I set it as 1 by default it is 0.5.

  .ps__thumb-y {
      background-color: rgba(var(--lpx-navbar-text-color-rgb), 1) !important;
  }
  

  Is this what you want?

  

  Please do let me know if this helps you

  Thank you Anjali

  Markdown supported.

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

  Save Cancel