The Navbar is intended as the primary means of navigating sites built using the Scouting Challenge theme. It is loaded into the Header by default but you are welcome to disable it. There is an option to display it in the Footer and it can be loaded into other page templates if you wish. It can be used more than once on the same page with the same options applying to all the instances.
The themes also supports WordPress Navigation Menus that are defined for locations immediately before and after the optional Navbar in the Header and Footer. They use the same layout as the Navbar but no styling options are currently offered in the theme.
The default appearance of the Navbar is to have eight fixed width buttons with two levels of cascading menu (as shown in the example). The Navbar can optionally use variable width buttons (as used on this site) and the cascade can be limited to a single drop down or disabled so that only the top level horizontal navigation bar is shown.
The first entry on the Navbar is a 'Home' button which points to
home_url() and you'd have to edit the code to change that.
There are then a number of buttons created with the
wp_list_pages() function to find all the top level pages. If you have too many top level pages you will have to exclude some or otherwise tweak the code.
After these pages there is the option of displaying a 'Shop' button that links to any URL of your choosing. The default is to display the button and to link it to ScoutSHOPS (this was copied from the Scouts 4 WordPress theme on the assumption that it was there for a good reason). From version 5.1.1 of the theme you can also specify the HTML 'target' attribute for the link (use of the target attribute is no longer deprecated in HTML5).
The last entry is a 'Log In' / 'Log Out' button. This again has been made optional. You can see it on the example but is has been disabled on this site.
All the menu entries default to white on a green background, switching to orange when selected, except for the 'Log In' / 'Log Out' button which has a purple background, again switching to orange. The background colours can be independently selected for each of the three levels of the menu and the 'Log In'/'Log Out' button. Any empty slots can be in any of the colours (including white which looks like empty space), but they default to grey.
wp_list_pages() approach doesn't allow for the idea of there being entries in the menu that are just headings or dividers. For example, you might want a 'parent page' to just be a heading in the menu rather than a link to an actual page. If you use the Page Links To plugin, or something similar, and change a page's permalink to simply '#' then the link wont actually do anything too annoying (if your menu is near the top of the page it may seem like nothing has happened, but if you are lower down you will be scrolled to the top) and the theme will do the rest by styling it so there doesn't even appear to be a link there in the first place (from version 3.3.1 onwards).
Please be aware that the menu relies on the CSS :hover pseudo-class to display the drop down menus. Unfortunately touch screen devices generally don't have the concept of 'hovering' so you might like to allow for drop down menus not always working. Although you can do tricks like the above you may be better off with each of the menu entries taking you to an actual page (whether it be the page itself or a redirection to one of the child pages). You need to make sure you can get to every page on the site without needing to use the drop down menu.
Having said that, on Chrome and Firefox for Android tapping on a menu with the '#' link does seem to leave the menu in the 'hover' state, even though it has also obeyed the click link by scrolling to the top of the page, so that could be the way to go. The problem is that it has to work on all mobile browsers otherwise navigation is lost.