需要帮助使顶部导航菜单与主菜单保持一致并添加社交媒体图标

Question

尝试使顶部导航栏在滚动时像主导航栏一样在滚动时保持不变，并且需要在顶部栏的左侧添加社交媒体图标。网站 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>

Answer 1

要让顶部的黑色导航栏在用户向下滚动时粘在页面上，

  #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 代码中进行额外标记。

需要帮助使顶部导航菜单与主菜单保持一致并添加社交媒体图标

Need help making top nav menu stick with primary menu and adding social media icons

menu

header

sticky

web