Related post

Inheritance in Java programming with example | Zhullyblog

Posted by on
0

How to create a fixed menu with HTML and CSS - Zhullyblog

Posted by on
In this tutorial, we would learn to create a fixed menu bar.

Here is an example

How to create a fixed header

Here is the screenshot of the code



To make anything fixed, you use the make the CSS position fixed.
Study the code below

HTML code



<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="styles/style.css"/>
        <title>Fixed navbar</title>
</head>

    <body>
        <div class="navbar">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="disclaimer">Disclaimer</a>
            <a href="#Contact">Contact</a>
        </div>
    <div class="main">
        <h1>Fixed header example</h1>
        <h2>Header will remain fixed even when you scroll</h2>

        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text text</p>
        <p>Text</p>

        </div></body>
</html>


Then you style it with CSS.

 .main{

Margin-top: 30px;
}
            .navbar {

background-color: aqua;
position: fixed;
top: 0;
width: 100%;
overflow: hidden;}
.navbar a{
display: block;
text-align: center;
float: left;
color: white;
padding: 14px 16px;
text-decoration: none;
}



Please share




Get the latest tutorials and updates




Delivered by FeedBurner

Comments

Post a Comment