Изменяемое меню навигации с фиксированным верхом - PullRequest
Новая
       38

Изменяемое меню навигации с фиксированным верхом

0 голосов
/ 11 сентября 2018

Я пытаюсь сделать полу-отзывчивый проект веб-сайта, который можно будет просматривать на ipad. Я сделал HTML-тело с максимальной шириной 800 пикселей. Это работает достаточно хорошо для моих целей, но у меня также есть фиксированная навигация вверху с выпадающими меню. Когда размер сайта превышает 800 пикселей, он работает нормально, но если он масштабируется ниже этого, например, до ширины 768 при вертикальном просмотре на iPad, часть строки меню немного выпирает, в то время как остальная часть HTML пропорционально масштабируется с окном просмотра.

Я надеюсь, что лекарство - это что-то простое. Я включил очень упрощенную версию моего кода ниже. Я удалил все содержимое выпадающего меню, так как это должен быть только контейнер, который должен работать.

Заранее спасибо! :) 

    <html>
        <head>
        </head>
        <body>
            <div id="page">
                <header id="apu_top">some content<img src="images/chapter_cover_images/2x/ch5_apu@2x.png" width="100%"/> 
                </header>
                <main>      
                    <nav id="main_nav_bar_container"> 
                        <div id="main_nav_bar">
                            <div id="main_nav_top_div"> some content </div>
                        </div>
                    </nav>
                </main>
            </div>
        </body>
    </html>

CSS: 

    html {
        box-sizing: border-box;
        background-color: #888;
        clear: both;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }
    body {
        font-family: "Roboto Condensed";
        font-size: 13px;
        line-height: 1.19em;
        margin-bottom: 9px;
        font-style: normal;
        font-weight: normal;
        text-align: left;
        hyphens: auto;
    }
    #page {
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        background-color: #FFFFFF;
    }
    #main_nav_bar_container {
        width: 100%;
        position: fixed;
        max-width: 800px;
        top: 0;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        z-index: 1000;
    }

    #main_nav_bar {
        background-color: #2580B9;
        color: #F3A51D;
        font-size: 1em;
        height: 38px;
        width: 100%;
        vertical-align: middle;
    }
    #main_nav_top_div  {
        z-index: 10000;
        margin-left: 4%;
    }

picture of error at 768 width

1 Ответ

0 голосов
/ 11 сентября 2018

Хорошо, поэтому на вашем скриншоте, я думаю, я вижу поля по умолчанию в теле 8px и справа и слева.

Итак, вы можете добавить вычисление ширины 100% минус 2 * 8px. Оставьте максимальную ширину, чтобы она никогда не превышала 800 пикселей. 

#main_nav_bar_container {
    width: calc(100% - 16px);
    position: fixed;
    max-width: 800px;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    z-index: 1000;
}

Или вместо расчета ширины можно использовать left: 8px; и right: 8px;:)

...