Question

参考：http://meraxcapital.weebly.com/

我正试图在一个客户端的weebly主题中停止粘性标题但是它让我疯狂的是基本标题css代码：

/* Header */
.birdseye-header {
  position: fixed;
  z-index: 12;
  overflow-y: hidden;
  width: 100%;
  padding: 10px 30px;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
 .birdseye-header .container {
  display: table;
  overflow-y: hidden;
  width: 100%;
  max-height: 80px;
}
 .birdseye-header label.hamburger {
  display: none;
}
.birdseye-header .logo {
 display: table-cell;
 overflow-y: hidden;
 margin-right: 30px;
 padding: 0;
 vertical-align: middle;
 line-height: normal;
}
.birdseye-header .logo a {
 display: block;
  margin-right: 30px;
  margin-left: 10px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
 }
 .birdseye-header .logo img {
  display: block;
  overflow: hidden;
  max-width: 200px;
  max-height: 40px;
}
.birdseye-header .logo #wsite-title {
  display: block;
  max-width: 400px;
  max-height: 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  }

我已尝试过所有〜逻辑〜方法，但欢迎任何建议。

我也遇到了一些试图扩大徽标的冲突（与上面相同的代码）

我试图更改'max-width / height元素，虽然这种方法适用于在inspect元素中使用，但实际实现时却没有！

提前谢谢你！

Answer 1

目标是禁用“固定”位置并将其更改为绝对位置。如果您可以访问样式，那么我会将它们从固定更改为绝对。如果没有，那么您可以尝试使用以下内容覆盖其中的内容：

.birdseye-header, body.page-has-banner.affix .birdseye-header, body.splash-page.affix .birdseye-header {
    position: absolute !important;
}

关于图像大小...您需要在“.birdseye-header .logo img”选择器上禁用或更改max-width和max-height。

您可以尝试使用以下内容覆盖它们：

body.page-has-banner .logo img {
     max-height: 70px;
     max-width: 250px;
}

Answer 2

如果我理解正确，您希望停止将标题修复到网页顶部，则必须删除以下内容：

＆＃13;

.birdseye-header {
  position: fixed;
}

＆＃13;

此外你应该删除高度 - 这有些如何增加标题的高度 - 我认为它在你的main_style.css行/ 30：

＆＃13;

body.page-has-banner.affix .birdseye-header, body.splash-page.affix .birdseye-header { 
  position: fixed; 
  top: 0; 
  background: rgba(35, 35, 35, 0.95); 
  /* height: 60px; */
  padding: 10px 30px; 
}

＆＃13;

在Birdseye weebly主题上停止固定标题并使徽标更大

2 个答案: