Trying to make the top menu be centered and same width as the menu below. So pushing the social media icons to the right and the menu items to the left to even up with the main nav menu below. Example is: https://www.nelsonforensics.com/ as both the menus are ligned up perfectly. Our Website is: http://www.stephensengineering.com/stephens33/.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
height: inherit;
margin: 0;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px;
height: inherit;
border-left: 1px dashed #fff;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
/* background-color: #000; */
}
#navbar ul li:hover {
background-color: #fff;
}
#navbar ul li:hover a {
color: #000 !important;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:nth-child(3) {
border-right: 1px dashed #fff;
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 15px;
vertical-align: top;
}
.submit-btn {
background-color: green !important;
border-left: 1px dashed #fff !important;
}
-->
</style>
</head>
<body>
<!-- -->
<div id="navbar">
<ul>
<li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li><!-- --><li class="social-icon-wrapper" style="float:left"><a href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li><!-- --><li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li><!-- --><li><a href="tel:+18883000642">888-300-0642</a></li><!-- --><li><a href="http://www.stephensengineering.com/stephens33/stephens-university/">Stephens University</a></li><!-- --><li class="submit-btn" ><a href="http://www.stephensengineering.com/stephens33/submit-assignment/">Submit Assignment</a></li>
</ul>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire