Wrap long titels in side-nav


Topic: Wrap long titels in side-nav

brouzoulis pro asked 8 years ago

If I have side-nav li with a longer link text, the text will be clipped:

...
<li>
  <a href="#" class="waves-effect">This is a longer link text that will be clipped</a>
</li>
...
How can I make the text wrap to a new line? Alternatively, if this is not possible how can I introduce an ellipsis instead -> "This is a longer text..."

jbankster.web pro answered 8 years ago

Hi Brouzoulis, Shorting your link text is the easiest fix obviously. Several MDB css rules are effecting a simple line wrap when text overflows the parent container. From my testing, the simplest approach (IMO), to fix your issue, would be to widen the main "UL #slide-out .side-nav" element. By defualt, it appears to be 240px wide. Adjusting this style rule appears to be the easiest way to overcome your problem. The rule and the default setting in the MDB css file that you need to edit... or... override with your own custom stylesheet is found in the following rule:
.side-nav {
    width: 240px;
}
Simply adjust the above number, save changes, force refresh your browser cache... and keep adjusting that number until your link text in no longer chopped off. Having a live site to look at would help give the best answer. If this answer doesn't help, or you have further questions about my suggestion, then we will need a live link to look at before helping any further. For reference, I'm looking at a sidebar nav example used on MDB's site to give you the answer above. http://mdbootstrap.com/live/_MDB/index/docs/skins/skin-blue.html# I've assumed their style rules in the page above are the same in the stock MDB .css files you have. If not, we need a live link to look at. Hope that helps, Josh

brouzoulis pro answered 8 years ago

Hi Josh, Thanks for you thoughts! Yes, providing shorter "nav"-friendly versions of the links is probably the easiest. I did try to change the width of the .side-nav as suggested and for some other classes who also had this width specified. However, I ended up having some issues with the responsiveness. Something with the media-queries not being "in sync" causing the site not to render correctly on small screens. For now I don't have the time to investigate this, so I will go with the quickest solution and just shorten the links. Thanks again.

jbankster.web pro answered 8 years ago

Hi Brouzoulis, In my testing, using the example page on MDB's site I linked to previously, the only change I needed to make was in the single css declaration that targeted that single rule within. I also checked mobile views as well and all seemed to look fine to me. I didn't notice any media queries that included the width value for the side-nav. Maybe your MDB css files are different than what's used for the page I linked to. <<< That's why having a live link from your site is the only way to really give the best answer. Anyways, best of luck. Josh

Marta Szymanska staff pro premium answered 8 years ago

Hi Brouzoulis, As Josh said the best way to help you is see your website, so send us link and we try to help you. Best, Marta

brouzoulis pro answered 8 years ago

Hi again, sorry for the late reply. I don't have a live site yet, only running a local dev server... However, after fiddeling around a bit more, I found the issue. It was one of the media queries used for resetting the padding that was not set correctly. This caused me getting the nav-padding even on small screens - not great UI :) This is what I changed to make everything look alright with footers, navbar and content:

.side-nav {
    width: 340px;
}

.side-nav .logo-wrapper a {
  width: 340px;
}

.fixed-sn .double-nav,
.fixed-sn main,
.fixed-sn footer {
  padding-left: 340px;
}

@media (max-width: 1024px) {
  .fixed-sn .double-nav,
  .fixed-sn main,
  .fixed-sn footer {
    padding-left: 0;
  }
}
Thanks for your input, // Jim

jbankster.web pro answered 8 years ago

Nice Work Jim. Thanks for sharing your findings and solution. Josh
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags