How to place content under fixed flexbox navigation bar ?

05 Jun, 2020
Navigation bar: With CSS, you can change HTML menus into astonishing navigation bars. Navigation bar is nothing but the list of links. A navigation bar needs standard HTML as a base. By using <ul> and <li> components makes idealize sense.
We can place Content in the fixed navigation bar by two methods as follows:
Method 1: Using float in CSSSyntax:float: none | left | right | initial | inherit;Property Values:none: It will not influence the position of content (This is default). left: Content will float to the left of its container.  right: Content will float to the right of its container.  initial: Sets this property to its default value.inherit: Acquires this property from its parent component.Fixed Navigation Bar: We can include CSS and can make the navigation bar remain at the top of the foot of the page, indeed when the user scrolls the page:Example:<!DOCTYPE html><html>    <head>        <style>            body {                margin: 0;            }            ul {                list-style-type: none;                margin: 0;                padding: 0;                overflow: hidden;                background-color: rgba(0, 0, 0, 0.7);                position: fixed;                /* position property is used                    to fix navbar */                top: 0;                width: 100%;            }            li {                float: left;                /* when flexbox will be used                    then there will be no need                   to write float properties                    of CSS*/            }            li a {                display: block;                color: white;                text-align: center;                padding: 14px 16px;                text-decoration: none;            }            li a:hover:not(.active) {                background-color: #111;            }            .active {                background-color: #4caf50;            }        </style>    </head>    <body>        <ul>            <li>                <a class="active" href="#home">Home</a>            </li>            <li><a href="#news">News</a></li>            <li><a href="#contact">Contact</a></li>            <li><a href="#about">About</a></li>        </ul>        <div style="padding: 20px;                    margin-top: 30px;                    background-color:                         rgba(135, 206, 235, 0.5);                    height: 1500px;">            <h1 style="color: green;">GeeksforGeeks</h1>            <h1>Fixed Top Navigation Bar</h1>            <h2>Scroll Scroll Scroll......</h2>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>        </div>    </body></html>Output:Note: position:absolute; to the content ignores the float property.  List-style-type: none; is utilized to expel the bullets. A navigation bar does not require list markers. Set margin: 0; and padding: 0; to expel browser default settings.
Method 1: Using float in CSS
Syntax:
float: none | left | right | initial | inherit;
Property Values:
none: It will not influence the position of content (This is default). 
left: Content will float to the left of its container.  
right: Content will float to the right of its container.  
initial: Sets this property to its default value.
inherit: Acquires this property from its parent component.
Fixed Navigation Bar: We can include CSS and can make the navigation bar remain at the top of the foot of the page, indeed when the user scrolls the page:
Example:
<!DOCTYPE html><html>    <head>        <style>            body {                margin: 0;            }            ul {                list-style-type: none;                margin: 0;                padding: 0;                overflow: hidden;                background-color: rgba(0, 0, 0, 0.7);                position: fixed;                /* position property is used                    to fix navbar */                top: 0;                width: 100%;            }            li {                float: left;                /* when flexbox will be used                    then there will be no need                   to write float properties                    of CSS*/            }            li a {                display: block;                color: white;                text-align: center;                padding: 14px 16px;                text-decoration: none;            }            li a:hover:not(.active) {                background-color: #111;            }            .active {                background-color: #4caf50;            }        </style>    </head>    <body>        <ul>            <li>                <a class="active" href="#home">Home</a>            </li>            <li><a href="#news">News</a></li>            <li><a href="#contact">Contact</a></li>            <li><a href="#about">About</a></li>        </ul>        <div style="padding: 20px;                    margin-top: 30px;                    background-color:                         rgba(135, 206, 235, 0.5);                    height: 1500px;">            <h1 style="color: green;">GeeksforGeeks</h1>            <h1>Fixed Top Navigation Bar</h1>            <h2>Scroll Scroll Scroll......</h2>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something              Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>            <p>Write Something Write Something               Write Something Write Something..</p>        </div>    </body></html>
Output:
Note: position:absolute; to the content ignores the float property.  
List-style-type: none; is utilized to expel the bullets. A navigation bar does not require list markers. 
Set margin: 0; and padding: 0; to expel browser default settings.
Method 2: Using Flexbox in CSSFlexbox Flexbox could be an amazing layout device. By utilizing flexbox we are able to set content into columns and many more. We’ll shortly go through the properties of the flexbox. (You can use this following syntax in code and play with it!)Properties of flexbox for flex container: (property:values;)display: flex;flex-direction: row | row-reverse | column | column-reverse;flex-wrap: wrap | nowrap | wrap-reverse;flex-flow: column wrap;justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly | start | end | left | right;align-items: stretch | flex-start | flex-end | center | start | end | baseline | first baseline | last baseline | self-start | self-end;align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline;Properties of flexbox for flex items: (property:values;)order: 4;                       /* default is 0 */flex-grow: 2;                /* default 0 */flex-shrink: 5;              /* default 1 */flex-basis: auto;          /* default auto */flex: none; (It is shorthand property for flex-grow, flex-shrink and flex-basis combined (Ex. flex: 0 1 auto;) by default)align-self: auto | center | baseline | flex-start | flex-end | stretch;**Note that float, clear and vertical-align do no effect on a flex item. Also the use of negative numbers is prohibited .How to create fixed flexbox navigation bar?/* Modify the header(above we modified 
    ul and li instead of header)*/  
header {
  display: flex; 
  /* using flexbox property for parent
     also known as inline-flex*/  
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  position: fixed;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
}
In this Example,  display: flex; utilizing flexbox property for parent moreover known as inline-flex.  justify-content: space-between; things are evenly dispersed within the line; firstitem is on the begin line, final thing on the conclusion line. But in this illustration we styled header tag consequently this impact may not be seen. But on the off chance that we styled ul tag this impact will be seen.order: 1; The arrange property controls the order in which they show up within the flex holder. By default order is 0;Example:<!DOCTYPE html><html>    <head>        <style>            body {                margin: 0;            }              header {                display: flex;                /* Using flexbox property for parent                   also known as inline-flex */                justify-content: space-between;                /* Items are evenly distributed in                    the line; firstitem is on the                    start line, last item on the                    end line*/                align-items: center;                padding: 5px;                position: fixed;                overflow: hidden;                background-color: rgba(0, 0, 0, 0.7);                width: 100%;            }              nav {                order: 1;            }            .nav_links {                list-style: none;            }              .nav_links li {                display: inline-block;                padding: 0px 20px;            }              .nav_links li a:hover {                color: rgb(255, 255, 255);            }              li a {                display: block;                color: white;                text-align: center;                padding: 5px 5px;                text-decoration: none;            }            li a:hover:not(.active) {                background-color: #111;            }            .active {                background-color: #4caf50;            }        </style>    </head>    <body>        <header>            <nav>                <ul class="nav_links">                    <li><a class="active"                            href="#home">Home</a></li>                    <li><a href="#news">News</a></li>                    <li><a href="#contact">Contact</a></li>                    <li><a href="#about">About</a></li>                </ul>            </nav>        </header>        <div style="padding: 20px;              background-color: rgba(135, 206, 235, 0.5);             height: 1500px;">            <h1 style="color: green;">                <br />                GeeksforGeeks            </h1>            <h1>Fixed Flexbox Navigation Bar</h1>            <h2>Scroll Scroll Scroll......</h2>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>        </div>    </body></html>Output:
Method 2: Using Flexbox in CSS
Flexbox Flexbox could be an amazing layout device. By utilizing flexbox we are able to set content into columns and many more. We’ll shortly go through the properties of the flexbox. (You can use this following syntax in code and play with it!)
Properties of flexbox for flex container: (property:values;)
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: wrap | nowrap | wrap-reverse;
flex-flow: column wrap;
justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly | start | end | left | right;
align-items: stretch | flex-start | flex-end | center | start | end | baseline | first baseline | last baseline | self-start | self-end;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline;
Properties of flexbox for flex items: (property:values;)
order: 4;                       /* default is 0 */
flex-grow: 2;                /* default 0 */
flex-shrink: 5;              /* default 1 */
flex-basis: auto;          /* default auto */
flex: none; (It is shorthand property for flex-grow, flex-shrink and flex-basis combined (Ex. flex: 0 1 auto;) by default)
align-self: auto | center | baseline | flex-start | flex-end | stretch;
**Note that float, clear and vertical-align do no effect on a flex item. Also the use of negative numbers is prohibited .
How to create fixed flexbox navigation bar?
/* Modify the header(above we modified 
    ul and li instead of header)*/  
header {
  display: flex; 
  /* using flexbox property for parent
     also known as inline-flex*/  
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  position: fixed;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
}

In this Example,  
display: flex; utilizing flexbox property for parent moreover known as inline-flex.  
justify-content: space-between; things are evenly dispersed within the line; firstitem is on the begin line, final thing on the conclusion line. But in this illustration we styled header tag consequently this impact may not be seen. But on the off chance that we styled ul tag this impact will be seen.
order: 1; The arrange property controls the order in which they show up within the flex holder. By default order is 0;
Example:
<!DOCTYPE html><html>    <head>        <style>            body {                margin: 0;            }              header {                display: flex;                /* Using flexbox property for parent                   also known as inline-flex */                justify-content: space-between;                /* Items are evenly distributed in                    the line; firstitem is on the                    start line, last item on the                    end line*/                align-items: center;                padding: 5px;                position: fixed;                overflow: hidden;                background-color: rgba(0, 0, 0, 0.7);                width: 100%;            }              nav {                order: 1;            }            .nav_links {                list-style: none;            }              .nav_links li {                display: inline-block;                padding: 0px 20px;            }              .nav_links li a:hover {                color: rgb(255, 255, 255);            }              li a {                display: block;                color: white;                text-align: center;                padding: 5px 5px;                text-decoration: none;            }            li a:hover:not(.active) {                background-color: #111;            }            .active {                background-color: #4caf50;            }        </style>    </head>    <body>        <header>            <nav>                <ul class="nav_links">                    <li><a class="active"                            href="#home">Home</a></li>                    <li><a href="#news">News</a></li>                    <li><a href="#contact">Contact</a></li>                    <li><a href="#about">About</a></li>                </ul>            </nav>        </header>        <div style="padding: 20px;              background-color: rgba(135, 206, 235, 0.5);             height: 1500px;">            <h1 style="color: green;">                <br />                GeeksforGeeks            </h1>            <h1>Fixed Flexbox Navigation Bar</h1>            <h2>Scroll Scroll Scroll......</h2>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>        </div>    </body></html>
Output:
How to place content under fixed flexbox navigation bar?Example:<!DOCTYPE html><html>    <head>        <style>            body {                margin: 0;            }              header {                justify-content: space-between;                /* Items are evenly distributed                    in the line; firstitem is on                   the start line, last item on                   the end line */                padding: 5px;                position: fixed;                overflow: hidden;                background-color: rgba(0, 0, 0, 0.7);                width: 100%;            }              .bar {                display: flex;               /* Use flexbox property for parent                   also known as inline-flex */                align-items: center;            }            .search {               /* Take up the rest of the                   remaining space */                flex: 1;            }            .search input {                width: 90%;            }              nav {                order: 1;            }        </style>    </head>    <body>        <header>            <nav>                <div class="bar">                    <div class="username"                        style="color: rgb(255, 255, 255);                               font-size: 30px;">                    Search here :                        </div>                    <div class="search">                        <input type="search"                                placeholder="search..." />                    </div>                </div>            </nav>        </header>        <div style="padding: 20px;                    background-color: rgba(                    135, 206, 235, 0.5);                     height: 1500px;">            <h1 style="color: green;">                <br />                GeeksforGeeks            </h1>            <h1>Content in Fixed Flexbox              Navigation Bar</h1>                        <h2>Scroll Scroll Scroll......</h2>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>        </div>    </body></html>Output:
How to place content under fixed flexbox navigation bar?
Example:
<!DOCTYPE html><html>    <head>        <style>            body {                margin: 0;            }              header {                justify-content: space-between;                /* Items are evenly distributed                    in the line; firstitem is on                   the start line, last item on                   the end line */                padding: 5px;                position: fixed;                overflow: hidden;                background-color: rgba(0, 0, 0, 0.7);                width: 100%;            }              .bar {                display: flex;               /* Use flexbox property for parent                   also known as inline-flex */                align-items: center;            }            .search {               /* Take up the rest of the                   remaining space */                flex: 1;            }            .search input {                width: 90%;            }              nav {                order: 1;            }        </style>    </head>    <body>        <header>            <nav>                <div class="bar">                    <div class="username"                        style="color: rgb(255, 255, 255);                               font-size: 30px;">                    Search here :                        </div>                    <div class="search">                        <input type="search"                                placeholder="search..." />                    </div>                </div>            </nav>        </header>        <div style="padding: 20px;                    background-color: rgba(                    135, 206, 235, 0.5);                     height: 1500px;">            <h1 style="color: green;">                <br />                GeeksforGeeks            </h1>            <h1>Content in Fixed Flexbox              Navigation Bar</h1>                        <h2>Scroll Scroll Scroll......</h2>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write               Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>            <p>Write Something Write Something Write              Something Write Something..</p>        </div>    </body></html>
Output:
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS