Skip to main content

Side Navigation Bar CSS

 *{

    background-color: #353b48;

}

body{

    margin: 0px;

    padding: 0px;

    font-family: cursive;

}

.navbar{

    position: absolute;

    top: 50%;

    transform: translateY(-50% );

}

    

.navbar a{

    text-decoration: none;

    display:block;

    margin: 8px 0px;

   padding: 8px;

   width: 130px;

   font-size: 22px;

   /* background-color: #e74c3c; */

   color: white;

   margin-left: -100px;

   border-radius: 10px;

   transition: 0.6s;

}

.navbar a:hover{

    margin-left: 0px;

}

Comments

Post a Comment

Popular posts from this blog

HTML Tutorial 9

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Inline & Block Elements</title> </head> <body>      </body> </html>
Post a Comment
Read more

CSS Tutorial 24

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS Display Property</title>     <style>         *{             box-sizing: border-box;         }         header {             margin: auto;             border: 2px solid firebrick;             /* width: 30%; */         }         img {             /* display: inline; this is most property display inline, block and inline block */             /* if you select display inline so...... you do not set width but */             /* you select displ...
Post a Comment
Read more

HTML Tutorial 5

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Heading Paragraphs and Emmet</title> </head> <body> <h1>Heading 1 for Rajendra </h1>     <h2>Heading 2 for Rajendra </h2>     <h3>Heading 3 for Rajendra </h3>    <!-- if you need some example world so you use loram12 for 12 words --> <p> • Incompatible: the chosen fixed size may be too large for a user's available live space, causing the user to scroll in order to view the whole page; a fixedWeb page may also appear too small, leaving unsightly blank spaces.     <!-- <br> tag use for a line break or line change and it is self closing tags -->     <br>• Totalitarian: the Web does not want to run the risk of being under too mu...
Post a Comment
Read more