"Arabic Header"
Bootstrap 4.0.0 Snippet by aramse

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css" > <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/droid-arabic-kufi" type="text/css"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css"> <link href="slidercss.css" rel="stylesheet" > <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="sliderjs.js"></script> <!------ Include the above in your HEAD tag ----------> <!--Pulling Awesome Font --> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="socialmedia.css"> <title>دادگای سلێمانی | پەڕەی سەرەکی</title> <style> #title{ height: 50px; line-height: 50px; font-family: 'DroidArabicKufiRegular'; font-weight: normal; font-style: normal; vertical-align: middle; } #logo{ } </style> </head> <body> <div class="section" style="background-color: #242424; height: 120px"> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-sm-12 socialMedia"> <ul class="social-network social-circle"> <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-instagram"></i></a></li> <li><a href="#" class="icoYoutube" title="Youtube"><i class="fa fa-youtube"></i></a></li> </ul> <ul class="language"> <li><a href="#" class="arabic">عربي</a></li> <li><a href="#">|</a></li> <li><a href="#" class="kurdish">کوردی</a></li> <li><a href="#">|</a></li> <li><a href="#" class="kurdish">English</a></li> </ul> </div> <div class="col-md-8 col-sm-8 col-xs-2 text-right " id="title"> <h2 class="align-middle" style="color: #B79D49; margin-top: 40px">سەرۆکایەتی دادگای تێهەڵچوونەوەی ناوچەی سلێمانی</h2> </div> <div class="col-md-2 col-sm-2 col-xs-2"> <img src="https://app.sulicourt.com/images/cis-logo.svg" alt="logo" class="img img-responsive" width="50%" id="logo" > </div> </div> </div> </div> </bod> </html>
/*========================= Icons ================= */ .socialMedia{ padding-top: 30px; } /* footer social icons */ ul.social-network { list-style: none; display: inline; margin-left:40px !important; padding: 0px ; } ul.social-network li { display: inline; margin: 0 0px; margin-left: 0px; } .language{ padding-top: 10px; } ul.language { list-style: none; display: block; margin-left:0 !important; background-color: #242424; } ul.language li { display: inline; margin: 0 0px; font-family: 'DroidArabicKufiRegular'; } ul.language li a{ color: #fafafa; } .language a.arabic:hover{ outline-style: none; border: 1px dotted #B79D49; } .language a.kurdish:hover{ border: 1px dotted #B79D49; } /* footer social icons */ .social-network a.icoYoutube:hover { background-color: #ff0000; } .social-network a.icoFacebook:hover { background-color:#3B5998; } .social-network a.icoTwitter:hover { background-color:#33ccff; } .social-network a.icoLinkedin:hover { background-color:#007bb7; } .social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i { color:#fff; } a.socialIcon:hover, .socialHoverClass { color:#44BCDD; } .social-circle li a { border: 1px dotted #B79D49; display:inline-block; position:relative; margin:0 auto 0 auto; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; text-align:center; width: 30px; height: 30px; font-size:12px; } .social-circle li i { margin:0; line-height:30px; text-align: center; } .social-circle li a:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .social-circle i { color: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; }

Related: See More

Vue Material Kit
Resize & Fixed Header (shrinking header)
Header Curtain Effect
Left Sideways Panel Header

Questions / Comments: