将链接放在一起 - CSS移动样式

Question

我的链接在我的默认CSS中垂直堆叠，但我正在尝试将导航按到页面顶部并在移动设备中水平设置。似乎无法实现。 该网站位于WordPress中，这使得确定元素名称变得困难。

#sidebaar a, #sidebaar li {
text-align:right;
clear:both;

}

#sidebaar{
width:150px;
text-align, right;
align-content:right;
display:inline-block;
width:100%;

}

媒体风格：

 #sidebaar a, #sidebaar ul li, #sidebaar ul li a{
display:inline;
clear:none;

} #sidebaar{
    width:100%;
}

我的网站可在此处查看 - http://www.ubart320.org/students/mariaroo/gallery/

Answer 1

您的header和nav元素包含（在不同规则中）最大宽度为150px的width和max-width定义，宽度为160 / 360px，这会阻止您从更广泛的菜单。

您必须为两者定义width: 100%;和max-width: none;，如有必要，请添加!important to those values

Answer 2

你有一些时髦的代码。出于某种原因，您在移动设备上显示了两个菜单。但是，我将第二个菜单设置为display: none;并应用这些样式以获得可接受的结果（将此应用于您的移动样式）：

nav{
  width: 100%;
  max-width: none;
}
ul#menu-menu-2{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
#menu-menu-2 li{
  margin: 0 2.5px;
}

请参阅下面的最终结果。看起来你仍然需要在照片网格上做一些工作，但水平导航是可以接受的。如果您还有其他问题，请与我们联系！