How to keep menu items all in one line?-CodePudding

so I'm working on a Wordpress site for homework, and I've hit a stump. I am unable to spread out my menu, no matter what I do. I could use an additional plugin, but I would prefer to settle the matter with CSS. I am so so so sorry, but I don't know how to better show u the header code, without linking the site (which I can't do because that would require leaving it's hosting service open, increasing the hosting fee). Please, if u know of any other better way to show the code, let me know. P.S. I removed some parts of the CSS so it fits better on here.

<header role="banner">
    <a  href="#tp_content">Skip to content</a>
    
<div >
  <div >
    <div >
      <div >
                  <span><i ></i></span>
                          <span ><i ></i></span>
              </div>
      <div >
        <div >
                  </div>
      </div>
      <div >
                      </div>
    </div>
  </div>
</div>
<div >
  <div >
    <div >
      <div >
                  <div >
            <div >
              <div >
                <a href=""  rel="home" title=""><span ><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"  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 >
                                  <h1><a href="" rel="home">Hospital</a></h1>
                                                                                </div>
            </div>
          </div>
              </div>
      <div >
        
<div >
    <div >
        <div >
                            <div >
                    <button onclick="online_pharmacy_menu_open_nav()" ><i ></i><span >Open Button</span></button>
                </div>
                        <div id="mySidenav" >
                <nav id="site-navigation"  role="navigation" aria-label="Top Menu">
                    <li id="menu-item-43" >O nama</li>
<li id="menu-item-59" >Finansiranje</li>
<ul >
    <li id="menu-item-149" ></li>
    <li id="menu-item-162" ></li>
    <li id="menu-item-161" ></li>
    <li id="menu-item-160" ></li>
</ul>
</li>
<li id="menu-item-58" >Glasanje
<ul >
    <li id="menu-item-234" >O usluzi glasanja</li>
    <li id="menu-item-240" >Aktuelne teme</li>
    <li id="menu-item-239" >Prethodne teme</li>
</ul>
</li>
<li id="menu-item-57" >Diskusije
<ul >
    <li id="menu-item-301" >O ovoj usluzi</li>
    <li id="menu-item-302" >Diskusije</li>
</ul>
</li>
<li id="menu-item-56" >Sensing</li>
<li id="menu-item-155" >Nalog
<ul >
    <li id="menu-item-177" >Moj Profil</li>
    <li id="menu-item-141" >Izloguj se</li>
    <li id="menu-item-156" >Lista Korisnika</li>
</ul>
</li>
</ul></div>                 <a href="javascript:void(0)"  onclick="online_pharmacy_menu_close_nav()"><i ></i><span >Close Button</span></a>
                </nav>
            </div>
        </div>
    </div>
</div>      </div>
      <div >
        <div >
          

<form method="get"  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"  placeholder="Search …" value="" name="s">
    <button type="submit" >Search</button>
</form>        </div>
      </div>
      <div >
        <div >
                  </div>
      </div>
    </div>
  </div> 
</div></header>

Here is the picture of the current menu: https://i.stack.imgur.com/YAh6E.png

And here is what I'm trying to achieve (approximately, I just want all menu items in one line, as stated in the question title): https://i.stack.imgur.com/0SKTR.png

Thank you in advance, and once again, sorry for the clunky code snippet...

CodePudding user response：

Welcome to stackoverflow. An idea would be to use Bootstrap in order to achieve a proper layout of your navigation bar. Some examples could be found in the below link navbar bootstrap. The next step, would be to construct the navigation bar the way is needed. I mean, change the colors or size of text etc. It is just another idea.

CodePudding user response：

If you do not use it already, I suggest using a CSS Grid - it really helps with aligning elements on a site and is easy to get used to. There are many tutorials on YouTube. If you do already, check for a mistake or post the code here.