Css定位和媒体查询

Question

我正在尝试制作一个简单的响应式网页，为此我需要一些方法来解决我的问题 -

现在当我调整窗口大小时看到

现在我想要的是这个标志不要向下滑动，而是停留在那里并与 body 的其余部分一起滚动。

这是我的html

<ul id="gn-menu" class="gn-menu-main" style="z-index:99">
            <li class="gn-trigger">
                <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
                <nav class="gn-menu-wrapper">
                    <div class="gn-scroller">
                        <ul class="gn-menu">
                            <li><a class="gn-icon gn-icon-download">Home</a></li>                            
                            <li><a class="gn-icon gn-icon-cog">Us</a></li>                                                            
                            <li><a class="gn-icon gn-icon-download">MSR Scenes</a></li>
                            <li><a class="gn-icon gn-icon-cog">Literature</a></li>
                            <li><a class="gn-icon gn-icon-help">Music</a></li>
                            <li><a class="gn-icon gn-icon-cog">Food</a></li>
                            <li><a class="gn-icon gn-icon-download">Gaming</a></li>
                            <li><a class="gn-icon gn-icon-cog">Sci-Tech</a></li>
                            <li><a class="gn-icon gn-icon-help">Horoscopes</a></li>
                            <li><a class="gn-icon gn-icon-cog">Art</a></li>
                            <li><a class="gn-icon gn-icon-download">Comic</a></li>
                            <li><a class="gn-icon gn-icon-cog">Sports</a></li>
                            <li><a class="gn-icon gn-icon-help">Pop Culture</a></li>
                            <li><a class="gn-icon gn-icon-download">Free Advice</a></li>                          
                        </ul>
                    </div><!-- /gn-scroller -->
                </nav>
            </li>
            <li style="position:relative"><img src="images/logo_01.jpg" width="230" height="90" style="z-index:-1" class="logo" ></li>
            <li><a id="us" >Us</a></li>
            <li><a id="home" ><span>Home</span></a></li>
        </ul>

列表样式如下 -

.gn-menu-main > li {
    display: block;
    float: right;
    height: 100%;
    border-right: 1px solid #c6d0da;
    text-align: center;
  }
.gn-menu-main > li:nth-child(1) {
    float: left;
    border-right: none;
    border-left: 1px solid #c6d0da;
  }

.gn-menu-main > li:nth-child(2) {
    float: left;
    border-right: none;
    border-left: 1px solid #c6d0da;
  }

Answer 1

您可以设置 min-width整个菜单的属性。

#gn-menu {
    min-width: 300px;   
}

jsFiddle Demo