css 顶部酒吧有一个阴影-化身主题

mwg9r5ms  于 2023-05-30  发布在  其他
关注(0)|答案(1)|浏览(159)

网站的顶部栏有一个不应该出现的下拉阴影。

详情

我已经编辑了这个Jekyll主题的顶部栏,feeling responsive,以便我可以添加在顶部栏的标志,现在它有这个阴影。我可能以某种方式添加了它,但我不知道如何摆脱它。我在下面附上了几张图片,以便你更好地理解我在说什么。看看顶部栏的右下方,你会看到那里有一个阴影。

What It Looks Like Now

文件

存储库可以在here中找到,组件包括:
这是一些top-bar.scss请记住,在这个文件中有大约530多行代码,我真的不知道我在找什么。

  1. .top-bar {
  2. overflow: hidden;
  3. height: $topbar-height;
  4. line-height: $topbar-height;
  5. position: relative;
  6. background: $topbar-bg;
  7. margin-bottom: $topbar-margin-bottom;
  8. // Topbar Global list Styles
  9. ul {
  10. margin-bottom: 0;
  11. list-style: none;
  12. }
  13. .row { max-width: none; }
  14. form,
  15. input { margin-bottom: 0; }
  16. input {
  17. height: $topbar-input-height;
  18. padding-top: .35rem;
  19. padding-bottom: .35rem;
  20. font-size: $topbar-button-font-size;

这是navigation.html

  1. <div id="navigation" class="sticky">
  2. <nav class="top-bar" role="navigation" data-topbar data-options="scrolltop: false">
  3. <ul class="title-area">
  4. <div id="topbar-logo">
  5. <a href="{{ site.url }}{{ site.baseurl }}">
  6. <img id="topbar-logo-img"
  7. src="{{ site.url }}{{ site.baseurl }}/assets/img/logo-topnav.png"
  8. alt="Technovine Solutions"
  9. style="object-fit:contain"
  10. />
  11. </a>
  12. </div>
  13. <li class="name">
  14. <h1 class="hide-for-large-up">
  15. <!-- <a href="{{ site.url }}{{ site.baseurl }}" class="icon-tree"> {{ site.title }}</a> -->
  16. <!-- <img src="{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.logo }}"
  17. height="3rem" /> -->
  18. </h1>
  19. </li>
  20. <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
  21. <li class="toggle-topbar toggle-topbar-click menu-icon"><a><span>Nav</span></a></li>
  22. </ul>
  23. <section class="top-bar-section">
pkmbmrz7

pkmbmrz71#

我已经将max-height: fit-content;添加到_sass_07_layout.scss的导航中

  1. #navigation {
  2. -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
  3. box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
  4. max-height: fit-content;
  5. [class^='icon-']:before, [class*=' icon-']:before {
  6. margin-right: rem-calc(8);
  7. }
  8. }

并清理了_includes_navigation. html文件:

  1. <nav class="top-bar" role="navigation" data-topbar data-options="scrolltop: false">
  2. <ul class="title-area">
  3. <div id="topbar-logo">
  4. <a href="{{ site.url }}{{ site.baseurl }}">
  5. <img id="topbar-logo-img" src="{{ site.url }}{{ site.baseurl }}/assets/img/logo-topnav.png"
  6. alt="Technovine Solutions" style="object-fit:contain" />
  7. </a>
  8. </div>
  9. <li class="toggle-topbar toggle-topbar-click menu-icon"><a><span>Nav</span></a></li>
  10. </ul>
  11. ...
展开查看全部

相关问题