This stack can help you build the 'top' part of a webpage. Often this is the first part of a webpage that the user sees. This stack is designed for use with ThemeFlood themes like Blank, although on some occasions you may be able to use it in themes and frameworks from other companies.
Example
This is an example of Topper stack, with largely the default options used.Quality outdoor clothing
since 1964
Setup
Follow the normal procedure to install and add the stack to your webpage. In edit mode, press the blue button to add items to your navigation bar. Items can be simple words set as navigation links, icons or images. Select your title / logo and check the 'is title / slogan item'. Topper uses modern CSS Flexbox to position and order your items, so setting an item to be the title will ensure it shows at the top of the menu on mobile.The dropzone below the banner image is for overlay content. Leave it empty if there is nothing to put here. Style this content using your normal controls in Stacks or you can use custom CSS code.
More to play with
Topper may seem a little intimidating at first glance. However this is very-much an 'expert grade' stack element that embraces the latest and greatest in web design technology. There are some exceptionally powerful settings to help you get things looking perfect. All the heights, padding and other dimensions are fully customisable. Topper can be placed within the normal page flow or added to a theme ExtraContent container. It also integrates well with many other stacks, like Fontamental. Plus there is a lot more you can do with custom CSS.Other details to note
The menu toggle button on mobile displays both the word 'menu' and the infamous hamburger icon. This is because some people have said how frustrating it is when themes and stacks are that only display the hamburger! Vistors to a website might not know that the hamburger icon is a menu. Topper includes both a hamburger icon and the word 'menu' (this can be changed in the stack settings to something else). So this puts you on course towards building a very accessible menu that will not confuse your site users.Topper only supports a single level of navigation links (no subpages or drop-downs). This has been done on purpose, given that the stack is provided free, but also because we want to push more towards making this easier for end users to actually use! As always, if you need a fully-fledged accessible menu solution, look no further than Gator.
