在最小化浏览器窗口时试图让徽标坚持下去

Question

我在菜单栏旁边添加了一个徽标，但只要我最小化浏览器窗口，它就会移动并突出显示菜单选项卡。无论浏览器窗口的大小如何，我都希望它保持不变。

以下是我的徽标HTML代码：

<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>

以下是与徽标对话的CSS（我正在使用Thesis 1.8.4，这就是包含.custom的原因）：

.custom .headerlogo {
    width: 236px;
    margin-left: 160px;
    margin-top: 0px;
    position: absolute;
    top: 5px;
    left: 0px;
}

此外，这里是徽标旁边菜单栏的CSS代码：

.custom .menu {    
    margin-top: -474px;
    margin-left: 165px;
    width: 950px;
    margin-bottom: 11px;
}

以下是菜单下方标题图片的CSS代码和徽标：

.custom #header_area {
    background: none repeat scroll 0 0 #03989c;
    height: 100px;
    margin-top: 475px;
}
.custom #header_area .page {
    background:transparent;
}
.custom #header {
    background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
    width: 1265px;
    height:400px;
    padding-top: 0px;
    margin-bottom: 26px;
    margin-left: -140px;
    border-bottom:0;
}

以下是指向该网站的链接：http://passionpreneurenterprises.com/kerrizane/about-kerri/如果您的浏览器已最大化，您会看到左上角的徽标和右侧的菜单。但是如果你最小化浏览器窗口，你会看到徽标移动并略微位于菜单后面，这不是我想要的。如果我能找到一种让它保持稳定的方法，那将是理想的选择。感谢您提供任何帮助。

更新：我看到发生了什么，当我登录并查看网站时，管理工具栏位于网站的顶部，当我试图定位它们时让事情看起来很清楚。所以我删除了管理工具栏并将徽标放在应该去的地方....

但仍有问题。当我在没有管理工具栏的PC上查看它时，它的外观如下：

上面的图片是它的外观。但是，当我在手机上查看时，徽标出现的方式如下：

有关如何解决此问题的任何建议？我还更新了徽标的CSS代码，以描述我最近所做的更改。感谢。

Answer 1

您当前的页面似乎与您发布的代码不同，但请查看这是否有帮助。

大多数智能手机会尝试缩放图像以使其适合屏幕，因此如果这不是您想要的结果，您希望覆盖此默认行为并告诉智能手机该做什么。

尝试将标题图片的CSS编辑为

#teaser-image{
    margin:0 0 10px 0;
    width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
    max-width: 1265px; /* set max width for image */
}    

祝你好运！

Answer 2

我最终在另一个论坛找到了答案。我需要调整我的.headerlogo CSS代码以包含“position：relative”而不是“position：absolute”（“position：absolute”是我在上面的问题中发布的原始CSS的一部分）。想要分享以防其他人遇到这个问题。我使用的更正代码如下：

.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}