如何在WordPress中设置桌面菜单宽度的样式？

Question

我希望我的桌面菜单在选择时跨越页面的一半。

这是我的菜单html：

<div class="module widget-handle mobile-toggle right 
visible-sm visible-xs">
<i class="fa fa-bars"></i>
</div>
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1- 
collapse"><ul id="menu" class="menu"><li id="menu-item- 
1496" class="menu-item menu-item-
type-post_type menu- 
item-object-page menu-item-home current-menu-item 
page_item page-item-19 current_page_item menu-item- 
has-children menu-item-1496 dropdown active"><a 
title="Home" href="https://adsler.co.uk/">Home </a>. 
<span class="dropdown-toggle shapely-dropdown" data- 
toggle="dropdown"><i class="fa fa-angle-down" aria- 
hidden="true"></i></span>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-1502" class="fa fa-user menu-item 
menu-item-type-post_type menu-item-object-page menu- 
item-1502"><a title="Create Adsler Account" 
href="https://adsler.co.uk/create-account/">Create 
Adsler Account</a></li>`

我试过了

@media (max-width: 1920px) and (min-width: 768px) {#menu {width: 50%}}

这与我遇到的另一个问题有关，那就是如何用fa fa-bars替换父菜单项所以现在它去吧 - > home-> angle down-main菜单，而它应该去 - bars-> main menu 。

HTML：

div class="module widget-handle mobile-toggle right 
visible-sm visible-xs">
<i class="fa fa-bars"></i>
</div>
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1- 
collapse"><ul id="menu" class="menu"><li id="menu-item- 
1496" class="menu-item menu-item-type-post_type 
menu-item-object-page menu-item-home current-menu- 
item page_item page-item-19 current_page_item menu- 
item-has-children menu-item-1496 dropdown active"><a 
title="Home" href="https://adsler.co.uk/">Home </a>. 
<span class="dropdown-toggle shapely-dropdown" data- 
toggle="dropdown"><i class="fa fa-angle-down" aria- 
hidden="true"></i></span>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-1502" class="fa fa-user menu-item 
menu-item-type-post_type menu-item-object-page

与此相关，菜单无法在桌面上正确滚动。 https://adsler.co.uk

Answer 1

查看您在评论中提供的示例页面，我认为您可以尝试：

#menu {
  left: calc(100% - 50vw);
  width: 50vw;
}

（在@media中，如果只应用于特定的屏幕大小）。

目前，由于相对定位的menu-item，菜单不会延伸。绝对定位的元素检查其边界基于相对定位的父元素的位置。

更多关于大众单位：

https://www.w3schools.com/cssref/css_units.asp和https://css-tricks.com/fun-viewport-units/

更多关于职位：

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

（我希望这是有道理的。）