Нужна помощь в создании главного меню навигации с основным меню и добавлении значков социальных сетей - PullRequest
Новая
       57

Нужна помощь в создании главного меню навигации с основным меню и добавлении значков социальных сетей

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

Попытка заставить верхнюю панель навигации придерживаться при прокрутке, как это делает основная навигация при прокрутке, и необходимо добавить значки социальных сетей слева от верхней панели. Сайт 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 { 
    margin: 0; 
    padding: 10px; 
    list-style-type: none;
    text-align: right; 
    background-color: #000; 
    } 

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #000; 
    } 

#navbar ul li a:hover { 
    color: #000; 
    background-color: #fff; 
    } 

--> 
</style> 
</head> 
<body> 
<div id="navbar"> 
  <ul>
    <li><a href="mailto:project@stephensengineering.com">project@stephensengineering.com</a></li> 
    <li><a href="+18883000642">888-300-0642</a></li> 
    <li><a href="http://github.com">Stephens University</a></li> 
    <li><a href="http://github.com">Submit Assignment</a></li> 
  </ul> 
</div> 
</body> 
</html>

1 Ответ

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

Чтобы верхняя черная панель навигации прилипала к странице при прокрутке пользователя вниз, 

  #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.*/

  }

Добавление социальных иконок потребует дополнительной разметки в вашем HTML-коде.

...