I am wondering how i can create a sticky menu bar while scrolling using exclusively html codes. Is this even possible? Website of inspiration http://www.herschelsupply.com.
For clarification... My menubar is consisting of "Plånböcker" "Kundtjänst" "Om Oss".
My HTML code for the menubar is...
<nav id="main_navigation">
<ul class="row">{{! Highlight "All items" if we are on a list page and no navigation item is selected }}
<li class="column {{#list_page}}{{#no_current_navigation}}selected{{/no_current_navigation}}{{/list_page}}"> <a href="{{store_url}}/products">
{{#navigation}}
<li class="column {{#is_current}}selected{{/is_current}}">
<a href="{{url}}">
{{label}}
</a>
</li>{{/navigation}} {{#store_blog_url}}
<li class="column"> <a href="{{store_blog_url}}" target="_blank">
{{#lang}}Blog{{/lang}}
</a>
</li>{{/store_blog_url}}
<li class="column">
<li class="column"> <a href="{{store_url}}/Kundtjänst">
Kundtjänst
</a>
</li> <a href="www.wingmanstore.se/Kundtjänst" target="_blank">
</a>
</li>
<li class="column {{#about_page}}selected{{/about_page}}"> <a href="{{store_url}}/page/about">
{{#lang}}Om oss{{/lang}}
</a>
</li>
</ul>
<div id="search_container">{{search}}</div>{{! By using #is_current within a #navigation block we can find the currently selected navigation item }} {{#navigation}} {{#is_current}} {{! Render the submenu if it has any navigation items }} {{#children?}}
<ul class="child_navigation row">{{#children}}
<li class="column"> <a href="{{url}}">
{{label}}
</a>
</li>{{/children}}</ul>{{/children?}} {{/is_current}} {{/navigation}}</nav>
</header>
Your question doesn't really make sense, since HTML is fairly useless without some direction from styles. For example, the site you referenced uses this to accomplish their sticky header:
#top-header-container {
position: fixed;
top: 0;
margin: auto;
width: 100%;
z-index: 98;
background: rgba(255,255,255,0.75);
height: 70px;
}
You can use that same type of styling by embedding a style
tag in your HTML page.