如何将菜单项全部排成一行？

Question

所以我正在 WordPress 网站上做作业，但我遇到了麻烦。无论我做什么，我都无法展开我的菜单。我可以使用额外的插件，但我更愿意用 CSS 来解决这个问题。我非常非常抱歉，但我不知道如何在不链接网站的情况下更好地向您显示标头代码（我不能这样做，因为这需要保持其托管服务开放，从而增加托管费用）。如果您知道任何其他更好的方式来显示代码，请告诉我。 附：我删除了 CSS 的一些部分，因此它更适合这里。

<header role="banner">
    <a class="screen-reader-text skip-link" href="#tp_content">Skip to content</a>
    
<div class="top-header py-2">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-6 align-self-center">
                  <span><i class="fas fa-phone mr-2"></i></span>
                          <span class="ml-3"><i class="far fa-envelope mr-2"></i></span>
              </div>
      <div class="col-lg-3 col-md-4 col-8 align-self-center">
        <div class="media-links text-md-right">
                  </div>
      </div>
      <div class="col-lg-1 col-md-2 col-4 align-self-center">
                      </div>
    </div>
  </div>
</div>
<div class="headerbox py-3">
  <div class="container">
    <div class="row">
      <div class="col-lg-2 col-md-3 col-9 align-self-center">
                  <div class="logo logo-same-line mb-md-0">
            <div class="row">
              <div class="col-lg-5 col-md-5 align-self-md-center">
                <a href="" class="custom-logo-link" rel="home" title=""><span class="customize-partial-edit-shortcut customize-partial-edit-shortcut-custom_logo"><button class="customize-partial-edit-shortcut-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"></svg></button></span><img width="142" height="142" src="/wp-content/uploads/2022/04/cut.png" class="custom-logo" alt="logo" srcset="/wp-content/uploads/2022/04/cut.png 142w, /wp-content/uploads/2022/04/cut-100x100.png 100w" sizes="(max-width: 142px) 100vw, 142px"></a>              </div>
              <div class="col-lg-7 col-md-7 align-self-md-center">
                                  <h1><a href="" rel="home">Hospital</a></h1>
                                                                                </div>
            </div>
          </div>
              </div>
      <div class="col-lg-5 col-md-2 col-3 align-self-center">
        
<div class="menubar">
    <div class="container right_menu">
        <div class="innermenubox">
                            <div class="toggle-nav mobile-menu">
                    <button onclick="online_pharmacy_menu_open_nav()" class="responsivetoggle"><i class="fas fa-bars"></i><span class="screen-reader-text">Open Button</span></button>
                </div>
                        <div id="mySidenav" class="nav sidenav">
                <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Top Menu">
                    <li id="menu-item-43" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-43">O nama</li>
<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-59">Finansiranje</li>
<ul class="sub-menu">
    <li id="menu-item-149" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-146 current_page_item menu-item-149"></li>
    <li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"></li>
    <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"></li>
    <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"></li>
</ul>
</li>
<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-58">Glasanje
<ul class="sub-menu">
    <li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-234">O usluzi glasanja</li>
    <li id="menu-item-240" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-240">Aktuelne teme</li>
    <li id="menu-item-239" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-239">Prethodne teme</li>
</ul>
</li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-57">Diskusije
<ul class="sub-menu">
    <li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301">O ovoj usluzi</li>
    <li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302">Diskusije</li>
</ul>
</li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56">Sensing</li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-155">Nalog
<ul class="sub-menu">
    <li id="menu-item-177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-177">Moj Profil</li>
    <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-141">Izloguj se</li>
    <li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156">Lista Korisnika</li>
</ul>
</li>
</ul></div>                 <a href="javascript:void(0)" class="closebtn mobile-menu" onclick="online_pharmacy_menu_close_nav()"><i class="fas fa-times"></i><span class="screen-reader-text">Close Button</span></a>
                </nav>
            </div>
        </div>
    </div>
</div>      </div>
      <div class="col-lg-3 col-md-4 align-self-center">
        <div class="header-search my-3 my-md-0">
          

<form method="get" class="search-form" target="_self"><input type="hidden" name="customize_messenger_channel" value="preview-6"><input type="hidden" name="customize_autosaved" value="on"><input type="hidden" name="customize_changeset_uuid" value="5173cce9-25cb-455f-92af-dac86e4c5279">   
    <input type="search" id="search-form-6282189ec75dc" class="search-field" placeholder="Search …" value="" name="s">
    <button type="submit" class="search-submit">Search</button>
</form>        </div>
      </div>
      <div class="col-lg-2 col-md-3 align-self-center">
        <div class="book-tkt-btn my-4 my-md-0 text-center">
                  </div>
      </div>
    </div>
  </div> 
</div></header>

这是当前菜单的图片：

这就是我想要实现的目标（大约，我只想将所有菜单项放在一行中，如问题标题中所述）：

提前感谢您，再次对笨重的代码片段表示歉意......

Answer 1

一个想法是使用 Bootstrap 来实现导航栏的正确布局。一些示例可以在下面的链接navbar bootstrap中找到。下一步是按照需要的方式构建导航栏。我的意思是，改变文本的颜色或大小等。这只是另一个想法。