
The Navbar is intended as the primary means of navigating sites built using the Scouting Challenge theme. It is loaded into the bottom of the Header by default but you are welcome to disable it. It can also be optionally displayed at the top of the Header or 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 theme also supports WordPress Navigation Menus that are defined for locations immediately before and after the optional Navbar in the three locations. They use the same layout as the Navbar but no styling options are currently offered in the theme (they'll look OK, you just can't change the colours unless you do it yourself).
The default appearance of the Navbar is to have eight fixed width buttons with two levels of cascading menu (as shown in the image above). 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 Scout Store (this was copied from the Scouts 4 WordPress theme, when it was called ScoutSHOPS, on the assumption that it was there for a good reason). You may 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 menu entries default to white on a Scout Teal background, switching to Scout Purple when selected, except for the 'Log In' / 'Log Out' button which has a Scout Purple background, switching to Scout Teal. 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 Scout Teal.
If you are using Easy Theme Options, the second and third levels of the menu will have different default colours. using Scout Green / Scout Navy and Scout Red / Scout Pink.
The 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.
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.