anchormenu

Anchor Menu is a WordPress plugin designed for showcase websites, blogs, and long-form content pages.
It provides an accessible anchor menu that highlights the current section and improves navigation on both desktop and mobile devices.
Current limitation: Anchor Menu is not designed for WooCommerce. Dynamic product pages are not supported.
<h4>Video Tutorials & Overview</h4>
Anchor Menu comes with video resources to help you get started quickly.
<ul>
<li>Plugin overview and features presentation</li>
<li>Step-by-step tutorials (English & French)</li>
</ul>
You can find all videos on the official YouTube channel: 
https://www.youtube.com/channel/UClZTid0uXs6FxgFp5BaEryQ
<h4>Key Benefits</h4>
<ul>
<li>
Automatic and intelligent: generates an anchor menu from defined sections.
</li>
<li>
Fully responsive:
<ul>
<li>Floating vertical menu on desktop (draggable or collapsible to show only its toggle button).</li>
<li>Collapsible horizontal bar at the bottom of the screen on mobile.</li>
</ul>
</li>
<li>
Display control: enable or hide the desktop menu and the mobile bar separately from the admin settings.
</li>
<li>
Visual customization: clean and readable by default, with an admin interface to customize colors, styles, and sizes.
</li>
<li>
Enhanced accessibility: keyboard navigation, screen reader support, optimized contrast, and built-in ARIA attributes.
</li>
<li>
Per-page customization: each page can have its own anchor menu tailored to its content.
</li>
<li>
Clarifies page structure: helps modern search engines and intelligent analysis tools better interpret your content through coherent section-based navigation.
</li>
<li>
SEO friendly: improves structure, internal linking, and readability for search engines.
</li>
<li>
Intuitive interface: fully managed from the WordPress admin, no coding required.
</li>
<li>
Non-intrusive: the mobile menu stays discreet and never blocks the main content.
</li>
</ul>

Anchor Menu

An accessible anchor menu that highlights the active section and improves navigation on desktop and mobile devices.

Dragan Nikolic

Marko Jakic

For support requests please use our <a href="http://awesomeheader.com/support/" title="Awesome Header support forums" rel="nofollow ugc">dedicated support forums</a>.
Get maximum control over your sticky header. Set your menu, submenus, secondary menu, search, your colors, backgrounds or transparency, your logo and much more!
Live preview of your settings changes in plugin’s page in admin area. After you change menu position, link colors, backgrounds, you can see it immediately how will it look on your website.
If you need the whole header replacement including the sticky header, with Top and Bottom header parts and more menus and breadcrumbs, you can buy <a href="http://codecanyon.net/item/awesome-header/11358372" rel="nofollow ugc">PRO version</a> called <a href="http://awesomeheader.com/" rel="nofollow ugc">Awesome Header</a> or go to <a href="http://awesomeheader.com/playground/" rel="nofollow ugc">Playground</a> to check out demos of what common features it offers.
<h4>Settings</h4>
Awesome Sticky Header by DevCanyon has long list of settings you can use to make your sticky header look the way you want.
<h4>General</h4>
These are general settings for your sticky header.
<ul>
<li>Sticky scroll position – when will your sticky header show, after how many pixels scrolled down</li>
<li>Header width – inner content (container) width, so your header stretches 100% of the browser window width, but logo and menus match your website’s content</li>
<li>Full width stretch – whether or not your header stretches 100% of the browser window width</li>
<li>Header position – your header can also be placed left/right if your theme hasn’t content middle oriented, just like Twenty Fourteen theme</li>
<li>Show description – show/hide site description (tagline)</li>
<li>Sticky animation – slide sticky header from top or appear without sliding animation</li>
<li>Hover transition – transition effect for link hover colors or backgrounds</li>
</ul>
In Appearance -> Menus if your menu item has description, it will be whown in sticky header too.
<h4>Header</h4>
Detailed settings for main navigation, sub-menus, logo, tagline, etc.
<ul>
<li>Choose menu – if you have created at least one menu under Appearance -> Menus, you can choose which menu will go to sticky header</li>
<li>Menu depth – three levels of navigation for sub-menu</li>
<li>Logo image upload – upload image to be used as your logo</li>
<li>Choose your logo type – logo can also be text link; if it’s image, you can set max. width for it</li>
<li>Menu padding (top/bottom) – decide how big is your sticky header by putting padding on top/bottom for main menu items</li>
<li>Logo padding (top/bottom) – same as above but top/bottom extra space for logo/description</li>
<li>Menu position – you can have menu centered; this way logo is centered too, above menu</li>
<li>Menu items padding (left/right) – left/right distance of menu items – don’t put them too close! 😉</li>
<li>Background image URL – choose background image for your sticky header and/or set repeat pattern (e.g. repeat-x)</li>
<li>Background color – choose background solid color</li>
<li>Site title color – color of your logo if it’s set as text type instead of image</li>
<li>Site description color – color for your description text under logo (if enabled in general settings)</li>
<li>Menu color – color for menu items</li>
<li>Site title font size – font size for your site title if it’s set as text type instead of image</li>
<li>Site description font size – font size for your description text under logo (if enabled in general settings)</li>
<li>Menu font size – font-size for menu items/sub-menu</li>
<li>Menu item hover background color – main menu item’s background color on hover effect</li>
<li>Top border – top border color of sticky header; you can set width in pixels for it</li>
<li>Bottom border – bottom border color of sticky header; you can set width in pixels for it</li>
<li>Hamburger icon color – this plugin has ability to hide your menu on small screens and show this icon – set color for it; when it’s clicked, menu is shown as drop-down</li>
<li>Hide menu if narrower than – decide at which screen width your menu hides (becomes responsive)</li>
<li>Include search box – at the end of menu you can have search icon which expands search form on hover</li>
<li>Include secondary menu – true or false; secondary menu is additional menu which is seen as last menu item, which on hover displays one more menu (and can show more, which is doable through filters)</li>
<li>Choose secondary menu – which menu goes as secondary</li>
<li>Sub-menu background color – background color for the whole sub-menu</li>
<li>Sub-menu item hover background color – hover color effect for sub-menu items</li>
<li>Sub-menu orientation – your sub-menu items can expand to left side too!</li>
</ul>
<h4>Custom CSS</h4>
Add your own styles, such as margins, paddings, borders, etc. 
This is NOT custom CSS for the whole website, only for sticky header.
<h4>Extras</h4>
Some more featues will go in here!
<ul>
<li>Transparency level – background transparency for sticky header (value range is from 0 to 100); works only when solid background color is set as background color</li>
<li>Sub-menu transparency level – background transparency for sub-menu (value range is from 0 to 100)</li>
</ul>
<h4>Filters</h4>
If you are awesome developer, there is plenty of space to extend sticky header’s content:
<ul>
<li>asmh_middle_before – filter for content before sticky header’s content</li>
<li>asmh_middle_after – after sticky header’s content</li>
<li>asmh_nav_menu_item – single menu item</li>
<li>asmh_middle_header – filter whole header’s content</li>
<li>asmh_middle – filter header container’s content</li>
<li>asmh_middle_menu_before – before main menu</li>
<li>asmh_middle_menu_after – after main menu</li>
<li>asmh_middle_menu – replace menu with something else – whole menu filter</li>
<li>asmh_before_brand – add content before logo & tagline area</li>
<li>asmh_after_brand – after logo & tagline area</li>
<li>asmh_nav_collapse – hamburger icon filter – use your custom button for expanding responsive menu</li>
<li>asmh_brand – filter logo (site title text or image)</li>
<li>asmh_tagline – filter site description</li>
<li>asmh_secondary_menu_before – for secondary menu add content before secondary menu</li>
<li>asmh_secondary_menu – filter for secondary menu</li>
<li>asmh_secondary_menu_after – add content after secondary menu</li>
</ul>

Awesome Sticky Header by DevCanyon

Get maximum control over your sticky header. Set your menu, your colors, backgrounds or transparency, your logo and much more!

Anchor Menu vs Awesome Sticky Header by DevCanyon