html - 如何在 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 替换父菜单项所以现在它是 bars->home->angle down-main menu，而它应该是 - bars->主菜单。

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 位于其上方，因此菜单不会展开。绝对定位的元素根据相对定位的父元素检查其边框的位置。

关于 vw 单位的更多信息:

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/

(我希望这是有道理的。)