Попытка сделать два навигационных меню одинаковой ширины - PullRequest
Новая
       4

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

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

Попытка сделать верхнее меню центрированным и иметь такую ​​же ширину, как и меню ниже.Так что нажимайте значки социальных сетей справа и пункты меню слева, чтобы выровнять главное меню навигации ниже.Пример: https://www.nelsonforensics.com/, так как оба меню выстроены идеально.Наш сайт: 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; REMOVE THIS*/
  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 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> 
    </div>
</body> 
</html>

1 Ответ

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

Разметка и CSS немного грязные, скорее всего, они генерируются темой WordPress или чем-то.

Ваш топ #navbar не выровнен с вашим .main_menu, потому что .main_menu имеет класс начальной загрузки container.

Быстрое решение, было бы добавить класс container к ul вашей панели навигации. Вам также необходимо удалить правило margin: 0 вашего #navbar ul, поскольку оно перезаписывает правило поля .container по умолчанию (вы можете явно установить margin-bottom: 0, если хотите.

Наконец, я думаю, вам нужно добавить тот же черный background-color к вашему #navbar, потому что теперь это может выглядеть немного неловко, когда оно будет содержаться - но это дизайнерское решение (и я не дизайнер ).

Итак, я повторяю измененный код. 

#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;
}

<div id="navbar"> 
  <ul class="container">

  </ul> 
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...