Bootstrap in Joomla template, reduce font size on small screen

[Atelierbram]

First you want to disable Less, maybe it’s just as simple as unchecking a box in the CMS framework like in this example. It’s important you do this, because you want to edit raw CSS files, that are generated, and regenerated each time again through the less preprocessor engine, you don’t want it to overwrite your edits. (Check: as long as you are seeing this .less suffix in Chrome DevTools styles tab, Less is not disabled.)
Now I think about it @elixir_pr , maybe this was your problem all along …

After that’s done, you can edit your bootstrap.css stylesheet (make a backup copy). It’s really not that bad, like I wrote before, search for all instances of navbar in your favorite text-editor (there are 232 hits when I cmd-f in the browser). Each time you find a block with a bunch of them inside a @media (min-width: 768px) block, change 768px to 992px.

[elixir_pr]

I tried this. This is working. But still the mobile menu appears too late (when the windows is dragged to smaller size) because before the mobile menu shows up, for some little range of window width, the normal menu’s items overflow to the next line. You can try this by visiting the website yourself at http://piph.prime.edu.pk – If you drag the window borders and make the width smaller gradually, the menu items overflow to next line for some time before the mobile menu is shown. Instead of 992px what size should I use for the mobile menu to show up before the normal menu’s items overflow to next line. Thanks for your help.

[Atelierbram]

I will do this, but before that, allow me to schow you an alternative. When you would change the font-size of the .nav element in bootstrap.css on line nr. 3794 from 16px to 14px, then it will break right, and still look good, (in my opinion even better).

Also you could change the padding from 15px to 14px on the link itself:

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 14px;
}

But this codeblock lives on line 31 of navs.less, as seen from styletab in Chrome DevTools, so it seems the Less engine is still on!

Another thing I would like you to consider is changing the contact-link-text from: Contact US to just Contact.

---

About the breakpoint: right now when it’s round about the 1200px breakpoint, then it will be OK. In Chrome, with DevTools open, when dragging the browser-window, you will see the screen dimensions appear in the top-right corner. And there’s always other tools as well, maybe try searching for this.

[elixir_pr]

I will reduce the font-size and padding. This was helpful. Thank you.

[Author]

Posts