Javascript 固定移动菜单和徽标作为较小屏幕的标题

在这个文件中，我有一个用于较大屏幕的侧导航菜单。我想在

1024px

width下方为手机和较小屏幕创建一个导航栏。我曾尝试将移动导航栏隐藏起来，以便在更大的屏幕上显示，但它只是起了作用。我需要一些这里是我的网页链接

我希望它看起来像这样 我从他们那里得到了这个页面的灵感，他们能够使它响应

var slideIndex=0；
var slides=document.getElementsByClassName（“主页幻灯片”）；
放映幻灯片（）；
函数showSlides（）{
var slideLength=slides.length；
//在幻灯片中淡出
setTimeout（函数（）{
如果（slideIndex==slideLength）{
slideIndex=0；
}
幻灯片[slideIndex].classList.add（“fadeIn”）；
}, 10);
//淡出幻灯片
setTimeout（函数（）{
如果（slideIndex==slideLength）{
slideIndex=0；
}
幻灯片[slideIndex].classList.remove（“fadeIn”）；
}, 3980);
slideIndex++；
设置超时（显示幻灯片，4000）；
}

/*----------------------------------------------------
@导航菜单
-----------------------------------------------------*/
.标志{
填充：8px；
利润率：20px0；
}
navbar先生{
身高：100%；
宽度：300px；
位置：固定；
z指数：1；
排名：0；
左：0；
}
纳瓦尔先生{
显示：块；
文字装饰：无；
字体系列：“Nunito Sans”，无衬线；
字体大小：13px；
填充：9px；
}
保险商实验室{
左侧填充：0px；
左边距：0px；
}
ulli{
列表样式：无；
左侧填充：0px；
左边距：0px；
}
.navbarFooter{
位置：相对位置；
右：0；
左：0；
文本对齐：居中；
}
.分隔器{
宽度：16%；
文本对齐：居中；
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
边框底部：1px实心rgba（0,0,0,0.3）；
}
.导航内容{
位置：相对位置；
边缘顶部：50px；
}
/*----------------------------------------------------
@主页
-----------------------------------------------------*/
.幻灯片容器，
梅因先生{
宽度：计算（100%-300px）；
高度：100vh；
最小高度：100vh；
}
.描述容器{
位置：绝对位置；
底部：40px；
左边距：315像素；
}
.描述{
保证金：自动；
宽度：450px；
高度：250px；
位置：相对位置；
}
.主页幻灯片{
宽度：100%；
高度：100vh；
最小高度：100vh；
-webkit过渡：所有0.5s线性；
-moz过渡：所有0.5s线性；
-o型过渡：所有0.5s线性；
过渡：所有0.5s线性；
位置：绝对位置；
排名：0；
右：0；
不透明度：0；
}
.主页{
高度：100vh；
最小高度：100vh；
宽度：100%；
}
.主页幻灯片img{
高度：100vh；
最小高度：100vh；
宽度：100%；
背景位置：顶部；
}

+1 (646) 580-7740


info@hillandboyd.com


美国纽约。

豪华活动
我们创造美丽的事件
加入我们的行列，与我们一起“毫无疑问，无论大小，还是离谱”，畅谈所有关于新娘的事情！这是一次让两位行业专家就任何让你夜不能寐的话题回答你的问题的机会。

产生影响
战略与销售

永恒的记忆
用爱心服务

要隐藏导航面板并使网站在移动视图中响应，请使用css中的媒体查询

@media only screen and (max-width: 736px) { /* css property for phone */ }

设置动画并查看侧面导航的步骤

---

您使用的模板是否支持汉堡包菜单？据我所知，CSS的编写似乎没有考虑到响应性。你必须制作一个移动友好的CSS，然后将它与桌面版结合起来，并进行媒体查询。如果你去的话，事实上他们使用了完全相同的样式，并且能够做出响应。我从他们的移动版本中获得了屏幕截图。@mplungjan是的。@Debs您提供的演示站点正在使用一个流行的CSS和JS库。你可能想看看。如何成功隐藏大屏幕导航而不影响大屏幕菜单的高度和间距。动画不是问题，但巧妙地删除导航菜单，我不希望它是完全相同的方式与页面，我想要一个顶部nav@Debs正在添加.navbar{display:block；}“to media query”将在手机视图中为您删除导航栏。完成这项工作是远远不够的，Paul。如果您花时间检查代码并尝试实现，您将明白我的意思。谢谢你的努力though@Debs在您上面提到的站点中，他们使用了引导、sticky kit、jquery、modenizer和其他js文件。请查看前面提到的main.js文件，您希望我在main js文件中看到什么？