移动菜单定位

Question

我正在使用HubSpot COS构建我的第一个模板，我正在尝试为我的响应菜单实现移动菜单。

我有一个菜单，我添加了一个自定义class ="custom-menu-primary"。 HubSpot提供了我在页面的页脚上引用的JS代码。我可以看到JS的一切都在按照预期工作，但这是我无法弄清楚的CSS定位。

在移动我的菜单正在向下移动，我不能保持，如果从下移。我尝试使用固定位置移动定位并应用whitespace: nowrap;，没有任何东西看起来像预期的那样工作。在这个HubSpot文章中，链接到JS和CSS。

将移动触发器移动到角落最右侧的最佳方式是什么？这是我的网站的link。

http://prntscr.com/elwvyi

Answer 1

在媒体查询部分，为logo类，添加：

float:left; 

对于类widget-type-space：

display: none; 

Answer 2

这里是你的问题的快速修复时，下面的代码暂时解决。

请参考导航栏的引导程序。 Bootstrap navbar documentation

@media (max-width: 767px) 
raw-resource?po…fered=true:863 
.mobile-trigger { 
    display: inline-block !important; 
    cursor: pointer; 
    position: fixed; 
    top: 30px; 
    right: 20px; 
    width: auto; 
    height: auto; 
    padding: 7px 10px 8px 10px; 
    background: #ffffff; 
    border: 1px solid #000000; 
    font-size: 16px; 
    font-weight: normal; 
    text-align: left; 
    text-transform: uppercase; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    color: #000000; 
} 

@media (max-width: 767px) 
raw-resource?po…ered=true:1007 
.custom-menu-primary.js-enabled .hs-menu-wrapper { 
    width: 95%; 
    position: fixed; 
    margin: 20px 10px 0px 10px; 
    top: 45px; 
    left: 0; 
    padding: 0; 
}