Search code examples
htmlmenupositionsticky

Can I create a sticky menu bar with only HTML?


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>

Solution

  • 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.