html - 侧边栏在桌面时位于错误的位置，但在移动时不在

Question

我目前为我的艺术制作的网站有问题theyoungillustrations.com

我完全没有编码经验，所以请像我五岁一样解释

我正在修改现有代码，但边栏出现问题。因为我做了一个横幅(在顶部)，侧边栏目前在它下面，我不知道如何在不破坏移动侧边栏的情况下解决这个问题。

这似乎是目标，但样式部分是我不确定的部分。

 <div id="sidebar" class="{select:Header Text Case} ">        

<div class="inner animated slow">
    <div class="wrap">

        <nav class="sidebar-navigation cl">
            <ul>

                {block:IfHomeLink}
                    <li><a href="/">Home</a></li>
                {/block:IfHomeLink}

                {block:HasPages}
                    {block:Pages}
                    <li> <a href="{URL}">{Label}</a></li>
                    {/block:Pages}
                {/block:HasPages}

            </ul>
        </nav>

    </div>
</div>
</div>


<div id="header" class="{select:Header Text Case} ">
<div class="wrap">
    <div class="inner">

        <div class="logo">
            {block:ifnotlogoimage}
                <a href="/" title="{lang:Home}">{Title}</a>
            {/block:ifnotlogoimage}
            {block:iflogoimage}
                <a href="/"><img src="{image:Logo}" alt="logo" /></a>
            {/block:iflogoimage}
        </div>        

        <nav class="navigation cl">
            <ul>
                {block:HasPages}
                    {block:Pages}
                    <li> <a href="{URL}">{Label}</a></li>
                    {/block:Pages}
                {/block:HasPages}


                &nbsp;
            </ul>
        </nav>

        </div>
        </div>



        <div class="sidebar-toggle">
            Menu
        </div>

        <div class="close-mobile-modal">
            <svg width="16px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path d="M7.172,10 L3.642,6.47 L0.102,2.93 L2.928,0.1 L10,7.173 L17.07,0.103 L19.9,2.93 L12.827,10 L19.897,17.07 L17.07,19.9 L10,12.827 L2.93,19.897 L0.1,17.07 L7.173,10 L7.172,10 Z"></path>
                </g>
            </svg>
        </div>
    </div>
</div>
</div>

然后我有这个:

 }
    #sidebar h3 {
        margin-bottom:20px;
        color:{color:Header Text};
        font-size:13px;
    }
    #sidebar-navigation {
       color:{color:Header Text};
        background:{color:Header Background};
        font-size:{text:Header Size};
    }

但是我没有头绪。感谢您的帮助。

Answer 1

这是因为你需要为各种设备添加断点，你可以借助这个网址:https://www.w3schools.com/css/css_rwd_mediaqueries.asp