How to use CSS Position Property In CSS
The CSS ‘ position: absolute’ property allows an element to be positioned relative to its nearest positioned ancestor or the initial containing block. Elements with `position: absolute` are positioned based on their nearest positioned ancestor, creating layouts with more control over element placement.
Approach
- Create the structure of the navbar in HTML using different types of the elements including <div>, <ul>, <li>, and button. There is unordered list defined where four list items are defined.
- Cretae a external stylesheet and link to the index.html file for defining the style to the navbar.
- Style the list item and set the position property to absolute and right to 20px. It will give the effect of split navigation bar.
- Use fontawsome icons and different CSS properties to style the navbar.
Example 2: The example shows split navigation bar using CSS with position property.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Navbar</ title > < link rel = "stylesheet" href = "style.css" > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" > </ head > < body > < div class = "box" > < div class = "navlist" > < ul > < li > < a href = "#" > < i class = "fa fa-solid fa-house" ></ i > Home </ a > </ li > < li > < a href = "#" > < i class = "fa fa-solid fa-address-card" ></ i > About </ a > </ li > < li > < a href = "#" > < i class = "fa fa-solid fa-address-book" ></ i > Contact Us </ a > </ li > < li class = "split" > < a href = "#" > < i class = "fa fa-solid fa-book" ></ i > Courses </ a > </ li > </ ul > </ div > </ div > </ body > </ html > |
CSS
@import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); * { margin : 0 ; padding : 0 ; box-sizing: border-box; } .box { background-color : rgb ( 187 , 121 , 189 ); font-family : 'Poppins' , sans-serif ; } ul { list-style : none ; } .navlist ul { display : flex; align-items: center ; gap: 20px ; margin-left : 20px ; height : 10 vh; } li { font-size : 20px ; transition: . 2 s linear; } li:hover { transform: translateX( 3px ); } a { text-decoration : none ; color : rgb ( 89 , 10 , 94 ); } a:hover { color : rgb ( 68 , 16 , 67 ); font-weight : 700 ; } .split { position : absolute ; right : 20px ; } @media only screen and ( max-width : 513px ) { li { font-size : 15px ; } } @media only screen and ( max-width : 424px ) { li { font-size : 10px ; } } |
Output:
How to create a split navigation bar using CSS ?
The article will demonstrate how to create a split navigation bar using CSS. There are two ways to make the split navigation bar these are with the help of flexbox properties and CSS position property. A split navigation bar is a popular layout where navigation links are divided into two sections. It is used to achieve a balanced look for the navbar.
Table of Content
- Using Flexbox and space-between
- Using CSS Position Property