Websites built with Blocs use the Bootstrap framework. When a site that uses Bootstrap is viewed on a mobile device, the standard navigation links become a toggle menu that is accessed via a button, this is normal behaviour as it improves the mobile user experience.
Changing the Toggle Symbol
Bootstrap displays a standard Hamburger symbol ☰ for the toggle menu button, there are times when you may wish to change this to give your site more character. Blocs makes replacing this symbol a really simple process. First select the navigation toggle item by Left Clicking it on the design canvas or if it’s hidden locate it in the layer tree.
Now in the sidebar inspector options, navigate to the drop down button labelled Symbol, by default this option is set to Standard Hamburger.
You can easily replace the default symbol by Left Clicking one of the available pre-defined styles.
Styling Toggle Symbol
The colour of the navigation toggle symbol is controlled via the Nav Bar that it is nested within. The Nav Bar Bric allows you to set the navigations theme to either dark or light, this theme refers to the background colour of the Bloc containing the navigation elements. When the dark theme is active the toggle symbol is white and when the light theme is active the toggle symbol is dark.
With the toggle item selected, you can quickly access the parent Nav Bar, using the related elements drop down options located at the right side of the Appearance title.
From here you can set the navigations theme.
In Bootstrap 4 the toggle symbol used for the menu navigation is now an svg image file, this means the symbols can no longer be styled in greater detailed using custom classes like they could with Bootstrap 3 (Blocs 2).
It’s also possible to set the appearance of the toggle menu as well as setting the breakpoint you want it to be visible on.