在SquareSpace中制作标题导航栏

时间：2015-07-24 21:21:07

标签： html css

我有一个使用adirondack主题的方空间网站：http://www.n2sreno.com/

基本上我不希望在桌面或手机上滚动时顶部标题区域缩小。此时导航将保留在屏幕上，徽标将更改为公司名称。

我想知道我可以使用什么css来实现它，以便在滚动时始终保持在页面上的位置。

我之前就已经完成了这项工作，但是那是在一个月之前，我无法弄清楚我现在是怎么做的。

HTML：

<header id="header">

          <!--MAIN NAVIGATION-->
          <nav class="main-nav" id="main-navigation">
            <div class="info-title-email-wrapper">

              <a id="desktopMenu" class="icon-menu"><span class="icon-text">Menu</span></a>


              <div class="site-title-wrapper">
                <h1 class="site-title" data-content-field="site-title">

                     <div class="logo-wrapper"><a class="home-link" href="/"><img class="logo" alt="Need 2 Speed" src="//static1.squarespace.com/static/5228c3b2e4b03f96f1b788e3/t/526ea98ee4b094e3038f506c/1437697275836/?format=1500w"></a></div>
                     <div class="logo-image-title"><a class="home-link" href="/">Need 2 Speed</a></div>

                </h1>
              </div>


              <a class="icon-info" id="info"><span class="icon-text">Info</span></a>
              <div id="email">
                <a class="icon-email"><span class="icon-text">Email</span></a>
              </div>
              <div id="headerSearch">
                <a data-source="template" href="/search" class="icon-search"><span class="icon-text">Search</span></a>
              </div>
            </div>


  <div data-content-field="navigation-mainNav" class="nav-wrapper">
    <ul class="cf">

       <!-- NAV LINKS ARE HERE-->


  </ul>
  </div>


          </nav>
        </header>

CSS 

#header {
    left: auto;
    margin: 0 auto;
    padding: 40px 0 0;
    position: fixed;
    top: 0;
    width: 1118px;
    z-index: 1800;
}
.header--nav-borders #header {
    border-style: solid;
    border-width: 0 0 1px;
}
.logo-image-title {
    font-family: "Helvetica Neue","Arial","sans-serif";
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    height: 0;
    letter-spacing: 1px;
    line-height: 1em;
    opacity: 0;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.3s ease-out 0s;
}
#desktopMenu {
    display: table-cell;
    font-size: 16px;
    transition: top 0.4s ease 0s, color 0.14s ease 0s;
    vertical-align: middle;
}
#email, #email-mobile {
    display: table-cell;
    line-height: 1px;
    text-align: right;
    transition: top 0.4s ease 0s, color 0.14s ease 0s;
    vertical-align: middle;
    visibility: hidden;
}
.header-dropdown-contact-or-location-contact #email {
    visibility: visible;
}
.header-dropdown-contact-or-location-contact #email-mobile {
    visibility: visible;
}
.header-dropdown-contact-or-location-contact #headerSearch, .header-dropdown-contact-or-location-contact #search-mobile {
    display: none;
}
.header-icons .outer-wrapper .icon-email {
    display: block;
    font-size: 18px;
    width: 20px;
}
#email-mobile .icon-email {
    font-size: 16px;
}
#info, #info-mobile {
    display: none;
    line-height: 1px;
    text-align: right;
    transition: top 0.4s ease 0s, color 0.14s ease 0s;
    vertical-align: middle;
    visibility: hidden;
}
.header-dropdown-contact-or-location-location #info {
    display: table-cell;
    visibility: visible;
}
.header-dropdown-contact-or-location-location #info-mobile {
    display: table-cell;
    visibility: visible;
}
.header-dropdown-contact-or-location-location #email-mobile, .header-dropdown-contact-or-location-location #email, .header-dropdown-contact-or-location-location #headerSearch, .header-dropdown-contact-or-location-location #search-mobile {
    display: none;
}
.header-icons #info::before, .header-icons #info-mobile::before {
    content: "";
    display: inline-block;
    font-family: "squarespace-ui-font";
    font-style: normal;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}
.header-icons #info::before, .header-icons #info-mobile::before {
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    width: 16px;
}
.header-icons #info::before, .header-icons #info-mobile::before {
    font-size: 21px;
}
.header-icons #info-mobile::before {
    font-size: 18px;
}
#headerSearch, #search-mobile {
    display: table-cell;
    line-height: 1px;
    text-align: right;
    transition: top 0.4s ease 0s, color 0.14s ease 0s;
    vertical-align: middle;
    visibility: hidden;
}
.header-dropdown-contact-or-location-search #headerSearch {
    visibility: visible;
}
.header-dropdown-contact-or-location-search #search-mobile {
    visibility: visible;
}
.header-dropdown-contact-or-location-search.header-icons .icon-search, .header-dropdown-contact-or-location-search.header-icons #search-mobile .icon-search {
    width: 20px;
}
.header-dropdown-contact-or-location-search.header-icons .icon-email {
    width: 0;
}
.header-dropdown-contact-or-location-search #email, .header-dropdown-contact-or-location-search #email-mobile {
    display: none;
}
.header-dropdown-contact-or-location-none #headerSearch, .header-dropdown-contact-or-location-none #search-mobile {
    display: none;
}
.header-icons .icon-search {
    cursor: pointer;
    display: block;
    font-size: 18px;
    width: 0;
}
#search-mobile .icon-search {
    font-size: 16px;
}
.header-icons .icon-text {
    display: none;
}
.outer-wrapper .icon-text {
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 0.9em;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
}
.header-icons #headerSearch, .header-icons #email {
    width: 20px;
}
.header-icons #info::before {
    width: 20px;
}
body:not(.header-icons) #headerSearch span, body:not(.header-icons) #desktopMenu span, body:not(.header-icons) #email span, body:not(.header-icons) #info span {
    display: inline-block;
    width: 80px;
}
body:not(.header-icons) #headerSearch span, body:not(.header-icons) #email span, body:not(.header-icons) #info span {
    text-align: right;
}
#desktopMenu, #mobileMenu {
    display: table-cell;
    visibility: hidden;
}
.has-nav #mobileMenu, .has-nav #desktopMenu {
    visibility: visible;
}
.always-show-nav #desktopMenu {
    visibility: hidden;
}
#header nav {
    padding: 0;
}
#header h1, #mobile-header h1 {
    font-family: "Helvetica Neue","Arial","sans-serif";
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transform: translateZ(0px);
    transition: font-size 0.14s ease 0s;
}
#mobile-header h1 {
    display: inline-block;
}
.info-title-email-wrapper {
    box-sizing: border-box;
    display: table;
    margin-bottom: 40px;
    padding: 0 75px;
    width: 100%;
}

1 个答案:

答案 0 :(得分：0)

我通过添加以下css

让它在开发人员工具中工作 
header {
  position: fixed;
  z-index: 99;
  width: 100%
}

您必须直接引用标题类.masthead .masthead-stacked才能使其工作，如下所示：

header.masthead.masthead-stacked {
  position: fixed;
  z-index: 99;
  width: 100%
}
相关问题
最新问题