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

---

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

---

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

---

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

---

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.

---

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

---