Question

我已经按照这个 - resize instructions - 在StackOverflow上调整MaterializeCSS导航栏高度的高度。在此过程中，我想调整徽标图像的大小。如果我这样做，则从导航栏到sidenav的更改不会很快发生，并且菜单项与徽标图像重叠。我怀疑更改必须在MaterialiseCSS javascript中注册。只是想知道是否有人已经通过这个并解决了这个问题并且可以提供帮助。我找不到任何关于这个问题的参考，但也许我只是没有找到合适的术语。

这是我更改的相关CSS，用于更改NAVBAR的高度以及.logo-image的高度/位置。

.logo-image {
    height: 85px;
    vertical-align: middle;
}

/*Change materializecss Navbar Size*/

nav {
    height: 100px;
    line-height: 100px;
}

nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
    height: 100px;
    line-height: 100px;
}

nav .button-collapse i {
    height: 100px;
    line-height: 100px;
}

nav .brand-logo {
    font-size: 1.6rem;
}

@media only screen and (min-width: 601px){
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 100px;
        line-height: 100px;
    }
}

我已经为＃logo-container添加了一个宽度，但这并没有解决问题。同样，我怀疑屏幕宽度阈值是内置于javascript中以允许某个宽度的徽标容器。

这是以django模板代码的形式尝试html代码的相关部分（我认为）。

<div id="nav">
    <nav class="navigation white-text" style="background-color: #2E3192;">
        <div class="nav-wrapper container white-text" style="background-color: #2E3192;">
            <a id="logo-container" href="{{ SITE_URL }}" class="brand-logo"
               src="{{ STATIC_URL }}{{ SITE_SET.logo }}?v={{ REVISION }}"><img class="logo-image"
                                                                               src="
                                                                                       {{ STATIC_URL }}{{ SITE_SET.logo }}?v={{ REVISION }}"></a>
            <ul class="right hide-on-med-and-down">
                <!-- Dropdown Trigger -->
                <li><a class="dropdown-button white-text" href="#!" data-activates="dropdown4">Our Party<i
                        class="material-icons right white-text">arrow_drop_down</i></a></li>
                <!-- Dropdown Trigger -->
                <li><a class="dropdown-button white-text" href="#!" data-activates="dropdown3">Take Action<i
                        class="material-icons right white-text">arrow_drop_down</i></a></li>
                <!-- Dropdown Trigger -->
                <li><a class="dropdown-button white-text" href="#!" data-activates="dropdown2">News & Info<i
                        class="material-icons right white-text">arrow_drop_down</i></a></li>
                <!-- Dropdown Trigger -->
                <li><a class="dropdown-button white-text" href="#!" data-activates="dropdown1">Accounts<i
                        class="material-icons right white-text">arrow_drop_down</i></a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav blue lighten-1">
                {% if user.is_authenticated %}
                    <li><a class="white-text" href="{{ SITE_URL }}accounts/logout/">Logout</a></li>
                    <li><a class="white-text" href="{{ SITE_URL }}accounts/profile/">Profile</a></li>
                    {% if user.is_staff %}
                        <li><a class="white-text" href="{{ SITE_URL }}admin/">Admin</a></li>
                    {% endif %}
                {% else %}
                    <li><a class="white-text" href="{{ SITE_URL }}accounts/login/">Login</a></li>
                    <li><a class="white-text" href="{{ SITE_URL }}accounts/register/">Sign Up</a></li>
                {% endif %}
                <li><a class="white-text" href="{{ SITE_URL }}hcdp-info/">HCDP Info</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse">
                <i class="material-icons white-text">menu</i></a>
        </div>
    </nav>
</div>

并初始化javascript：

$(document).ready(function(){
    $('.button-collapse').sideNav();
    $('.parallax').parallax();
    $('.collapsible').collapsible();
    $('.dropdown-button').dropdown();
});

非常感谢任何帮助或建议！

更改NAVBAR徽标图像的站点 - 与菜单项重叠

0 个答案: