Попытка сделать пунктир разделителем меню вместо сплошных - PullRequest
Новая
       13

Попытка сделать пунктир разделителем меню вместо сплошных

0 голосов
/ 11 июля 2019

Попытка сделать пунктиры разделителей меню вместо сплошных линий. Я знаю штриховой код, но не хочу, чтобы он прошел весь путь от вершины верхнего бара до нижнего, так что просто посередине, если это происходит, поскольку пример похож на меню здесь: http://preview.themeforest.net/item/industrial-and-engineering/full_screen_preview/19013654?_ga=2.241886977.2083560788.1554387032-1316791551.1554387032 My сайт: http://www.stephensengineering.com/stephens33/ спасибо! :)

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>

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Попробуй это.Удалите border-left:1px dashed #696969 в #navbar ul li классе и добавьте этот CSS в класс #navbar ul li a, как показано ниже: 

#navbar ul li a { 
    font-family: 'Montserrat';
    text-decoration: bold; 
    padding: .2em 1em; 
    color: #fff; 
    border-left:1px dashed #696969
} 
.social-icon-wrapper:nth-child(3) a {
    border-right: 1px dashed #696969;
}
0 голосов
/ 11 июля 2019

Просто измените код следующим образом в вашем CSS-файле.

#navbar ul li {
  border-left: 1px dashed #696969;
}
.social-icon-wrapper:nth-child(3) {
  border-left: 1px dashed #696969;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...