How to keep menu items all in one line?

user_19126304 0
Viewed 71

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 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>

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...

wordpress alignment menu css
1 Answers

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.

user_169822980
Related