<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <style> /* Add a background color to the top navigation */ .sitehead{ background-color: #fff; overflow: hidden; } /* Style the links inside the navigation bar */ .headlogo { float: left; height: 85px; width: 85px; margin-left:10px; margin-top:7px; text-align: center; } .sitehead p { vertical-align: middle; float: left; color: #085288; text-align: center; text-decoration: none; font-size: 25px; font-weight:700; margin-top:35px; margin-left:15px; } /* Right-aligned section inside the top navigation */ .sitehead-right { float: right; margin-top:55px; margin-right:-20px; } .button-default { color: white; background-color: #c41230; text-align: center; text-transform: uppercase; display: inline-block; font-size: 14px; } .button-default-secondary { color: white; background-color: #539732; text-align: center; text-transform: uppercase; display: inline-block; font-size: 14px; } .button-slanted { -ms-transform: skewX(-35deg); -webkit-transform: skewX(-35deg); transform: skewX(-35deg); } .button-slanted-content { padding: 2px 10px; margin: 10px; -ms-transform: skewX(35deg); -webkit-transform: skewX(35deg); transform: skewX(35deg); display: inline-block; } </style> <div class="sitehead"> <div class="headlogo"> <img src="/confluence/download/attachments/217000371/CISA%20Logo%402x.png?api=v2" style="width:100%"></div> <p>CSD CyberSecurity Division Portal</p> <div class="sitehead-right"> <a href="#"> <div class="button-default button-slanted"> <span class="button-slanted-content">Evo: CSD Service Center</span> </div> </a> <a href="#"> <div class="button-default-secondary button-slanted"> <span class="button-slanted-content">AOP (Annual Operating Plan)     </span> </div> </a> </div> </div>