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..."

Add comment

jbankster.web pro answered 8 years ago

0 0 Best answer

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

Add comment

brouzoulis pro answered 8 years ago

0 0 Best answer

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.

Add comment

jbankster.web pro answered 8 years ago

0 0 Best answer

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

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

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

Add comment

brouzoulis pro answered 8 years ago

0 0 Best answer

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

Add comment

jbankster.web pro answered 8 years ago

0 0 Best answer

Nice Work Jim. Thanks for sharing your findings and solution. Josh

Add comment

Write

Create snippet

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

brouzoulis

Pro User

12Support score
5Questions 6Answers

0Snippets likes 0Snippets