This unobtrusive navbar will turn into a dropdown on narrow screens. Certain properties to demonstrate how it works have had to be disabled on this page, otherwise it would have interfered with the site navigation. You need to download it to properly see the workwise. The component can cover the whole page width, or you can set a limitation. The two downloadable files have no width limitation. The menu links in wide view and the ones in the dropdowns are independent of each other and can be edited and styled differently. In order to edit the dropdown links, you need to find the element with the ID #mobile-1 in the Elements tree. Then navigate to Styles pane - Effects tab and find the Translate. You will see that the mobile nav has been 'translated' -301px off screen. Change that to zero, then you will see the menu links. Remember to 'translate' it back when done. The Anchor is a link to a section further down on the same page. It has proven a problem to have such links work properly when they have to be selected from within a dropdown. Here it works well, even in IE11.
Fixed Navbar
This unobtrusive navbar will turn into a dropdown on narrow screens. Certain properties to demonstrate how it works have had to be disabled on this page, otherwise it would have interfered with the site navigation.
You need to download it to properly see the workwise. The component can cover the whole page width, or you can set a limitation. The two downloadable files have no width limitation.
The menu links in wide view and the ones in the dropdowns are independent of each other and can be edited and styled differently.
In order to edit the dropdown links, you need to find the element with the ID #mobile-1 in the Elements tree. Then navigate to Styles pane - Effects tab and find the Translate. You will see that the mobile nav has been 'translated' -301px off screen. Change that to zero, then you will see the menu links. Remember to 'translate' it back when done.
The Anchor is a link to a section further down on the same page. It has proven a problem to have such links work properly when they have to be selected from within a dropdown. Here it works well, even in IE11.
Download this component
Download this component with the
logo centered