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

桌面时边栏位置错误，但移动时则不行

1 个答案: