Reply To: Bootstrap in Joomla template, reduce font size on small screen

[Atelierbram]

When you would target the ul element in the menu called .nav in the media-query for/to medium-breakpoint, like

@media (max-width: 991px) { 
 .nav {
  font-size: 12px;
 }
}

then you will have reduced the font-size on smaller screens.

the menu items overflow to next line – which is what I want to stop

However this is not what I recommend you to do, because it will not prevent the menu items from wrapping in two lines on smaller screens. What I do recommend is trying the next thing out: changing the breakpoint variable in variables.less file @grid-float-breakpoint from small- to medium-screen.

In variables.less on line 299 change @grid-float-breakpoint: @screen-sm-min; to @grid-float-breakpoint: @screen-md-min;

After compiling (happens ‘on-the-fly’ with Less ), you will see the hamburger icon in the right corner disappear after a screen-width of 992px instead of 768px, and vs kick in at 992px.