Change breakpoint for topbar/tab-bar

[Strutsagget]

Hi im trying to find out but can't really get it working.

If i want to hide the topbar on everything below 1024px and show tab-bar.

Cant find how to set it in _settings.scss

[Tralapo]

Line 1428:

// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout

For you, should become:

$topbar-breakpoint: 1024px;

[Tralapo]

Oh wow, I just realise how stupid my answer is just now. I'm sorry. The _settings.scss topbar-breakpoint only works for the top-bar, it's not for the tab-bar.

To do what you want, you have to look at header.php. On line 42, you see:

<nav class="tab-bar show-for-small-only">

This tells the tab-bar is only shown on small screens. In parts/top-bar.php you can see the top-bar is shown on everything but small:

<div class="top-bar-container contain-to-grid show-for-medium-up">

Makes sense, right? You can play with those visibility classes to change the 'breakpoint' between the two. You could choose other classes, or change the current classes in _settings.scss

[olefredrik]

👍