Creating a Modern Website Layout: Exploring Sticky and Fixed Menus with Scrollable Content
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.
The Sticky Header Menu
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>
The Fixed Footer Menu
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.
Subscribe to my newsletter
Read articles from Ogunuyo Ogheneruemu B directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Ogunuyo Ogheneruemu B
Ogunuyo Ogheneruemu B
I'm Ogunuyo Ogheneruemu Brown, a senior software developer. I specialize in DApp apps, fintech solutions, nursing web apps, fitness platforms, and e-commerce systems. Throughout my career, I've delivered successful projects, showcasing strong technical skills and problem-solving abilities. I create secure and user-friendly fintech innovations. Outside work, I enjoy coding, swimming, and playing football. I'm an avid reader and fitness enthusiast. Music inspires me. I'm committed to continuous growth and creating impactful software solutions. Let's connect and collaborate to make a lasting impact in software development.