Trying to make menu separators dashes instead of solid lines. I know the dashed code but don't want it to go all the way from the top of the top bar to the bottom, so just in the middle if that makes since example is like the menu here: http://preview.themeforest.net/item/industrial-and-engineering/full_screen_preview/19013654?_ga=2.241886977.2083560788.1554387032-1316791551.1554387032 My website is: http://www.stephensengineering.com/stephens33/ thanks! :)
border-left: 1px dashed #696969;
<!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; REMOVE THIS*/
margin-bottom: 0; /* Suggested */
list-style-type: none;
text-align: right;
background-color: #000;
}
/* Suggested for aesthetic reasons */
#navbar {
background-color: #000;
}
#navbar ul li {
display: inline-block;
padding: 10px 4px;
height: inherit;
border-left: 1px solid #696969;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
/* background-color: #000; */
}
#navbar ul li:hover {
background-color: #000;
}
#navbar ul li:hover a {
color: #fff !important;
}
#navbar { background-color: #000; }
#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 solid #696969;
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 15px;
vertical-align: top;
}
.submit-btn {
background-color: green !important;
border-left: 1px solid #696969 !important;
border-right: 1px solid #696969 !important;
}
-->
</style>
</head>
<body>
<!-- -->
<div id="navbar">
<ul class="container">
<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>
Aucun commentaire:
Enregistrer un commentaire