Creating a Modern Website Layout: Exploring Sticky and Fixed Menus

In the world of web design, crafting an engaging user experience involves a delicate balance between aesthetics and functionality. In this tutorial, we'll embark on a journey to create a contemporary website layout that incorporates some key design elements: a sticky header menu, a fixed footer menu, scrollable content, and strategic use of icons.

A sticky header menu is a design feature that keeps the navigation menu fixed at the top of the page as users scroll. This ensures that users always have access to essential navigation options. Let's take a look at the HTML and CSS required to achieve this effect:

<!DOCTYPE html>
<html>
<head>
    <title>Styled Header and Content</title>
    <!-- Include necessary font and icon libraries -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    <style>
        /* Your CSS styles go here */
    </style>
</head>
<body>
   <header>

        <nav>

            <div class="logo">
                <div>Logo</div>
            </div>
            <div class="rightme">
                <div><button class="butt"><i class="fa fa-credit-card"></i></button></div>
                <div><button class="butt" id="loginButton">Login </button></div>
                <div><button class="butt" id="registerButton">Register </button></div>
            </div>

        </nav>
    </header>
    <!-- Scrollable content -->
</body>
</html>

<style>
    /* Define styles for the sticky header */
    header {
        background-color: #333;
        color: white;
        padding: 14px;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 100;
        height: 40px;
    }

        nav {

            padding: 0;
            display: flex;
            justify-content: space-between;
            margin-top: 0px;
        }

        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .rightme {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 15px;

        }

        .butt {
            padding: 10px;
            border-radius: 5px;
        }
</style>

A fixed footer menu is another design technique that maintains specific content or links at the bottom of the page, regardless of scrolling. This provides users with consistent access to important elements:

<!-- Inside the body of your HTML -->
  <div class="footers">
        <div class="goat">

            <a class="bottomflex whiter linker mack" onclick="menuclick()">
                <span><i class="fa fa-align-justify" style="font-size:16px"></i></span>
                <span> Menu </span>

            </a>
            <a class="bottomflex">
                <span><i class="fa fa-bookmark" style="font-size:16px"></i></span>
                <span> MyBets </span>

            </a>
            <a class="bottomflex">
                <span><i class="fa fa-gamepad" style="font-size:16px"></i></span>
                <span> BetSlip </span>

            </a>
            <a class="bottomflex">
                <span><i class="fa fa-lastfm-square" style="font-size:16px"></i></span>
                <span> Casino </span>

            </a>
            <a class="bottomflex">
                <span><i class="fa fa-wechat" style="font-size:16px"></i></span>
                <span> Chat </span>

            </a>
        </div>
    </div>

<style>
    /* Define styles for the fixed footer */
     .footers {
            background-color: #333;
            color: white;


            position: fixed;
            bottom: 0;
            z-index: 999;
            /* Ensure header stays on top of content */
            width: 100%;
            height: 74px;
        }
        .goat {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 20px;
        }

        .bottomflex {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }
</style>

Scrollable Content

Incorporating scrollable content is essential to accommodate information that might exceed the available viewport height:

<!-- Inside the body of your HTML -->
<div class="content">
    <!-- Your scrollable content here -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus non accusamus voluptatum doloribus deserunt tenetur commodi amet harum omnis, modi mollitia distinctio, at beatae? Nam quasi numquam praesentium repellat.</p>

</div>

<style>
    /* Define styles for the scrollable content */
    .content {
        padding: 5px;
        text-align: center;
        margin-top: 5px;
        margin-bottom: 80px;
        overflow-y: auto;
    }
</style>

Effective Use of Icons

Icons are indispensable tools in conveying visual cues and enhancing user experience. Here's how you can incorporate icons into your layout:

<!-- Inside the body of your HTML -->
<div class="bottomflex">
    <a class="bottomflex">
        <span><i class="fa fa-align-justify" style="font-size:16px"></i></span>
        <span> Menu </span>
    </a>
    <!-- Repeat for other icon options -->
</div>

Integrating these components, you can design a contemporary website layout that optimizes navigation, content consumption, and user engagement.

Feel free to adapt and expand upon this example to create captivating web designs that resonate with your target audience. As web design evolves, staying abreast of trends and best practices is pivotal to crafting impactful and user-centric websites.

Remember, the provided code can be customized to suit your project's specific requirements.

Creating a Modern Website Layout: Exploring Sticky and Fixed Menus with Scrollable Content

Table of contents

The Sticky Header Menu

The Fixed Footer Menu

Scrollable Content

Effective Use of Icons