Header'daki Menüleri Nasıl Genişletebilirim ?

<nav id="site-navigation" class="main-navigation clearfix" role="navigation" style="width: 1253px;">
			<div class="inner-wrap clearfix">
				
					<div class="home-icon front_page_on">
						<a href="http://localhost/1/fr/" title="ColorMag">
							<i class="fa fa-home"></i>
						</a>
					</div>
				
									<div class="search-random-icons-container">
						
		<div class="random-post">
					</div>

									<div class="top-search-wrap">
								<i class="fa fa-search search-top"></i>
								<div class="search-form-top">
									
<form action="http://localhost/1/fr/" class="search-form searchform clearfix" method="get" role="search" data-trp-original-action="http://localhost/1/fr/">

	<div class="search-wrap">
		<input type="search" class="s field" name="s" value="" placeholder="Recherche" data-no-translation-placeholder="">

		<button class="search-icon" type="submit"></button>
	</div>

<input type="hidden" name="trp-form-language" value="fr"></form><!-- .searchform -->
								</div>
							</div>
											</div>
				
				<p class="menu-toggle"></p>
				<div class="menu-primary-container"><ul id="menu-headertr" class="menunav-menu" aria-expanded="false"><li id="menu-item-539" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-539"><a href="#">RÉGIMES</a>
<ul class="sub-menu">
	<li id="menu-item-562" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-562"><a href="http://localhost/1/fr/category/diyetler/">RÉGIMES</a></li>
	<li id="menu-item-564" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-564"><a href="http://localhost/1/fr/category/vitaminler/">VITAMINES</a></li>
	<li id="menu-item-561" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-561"><a href="http://localhost/1/fr/category/detoks/">DÉTOX</a></li>
	<li id="menu-item-563" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-563"><a href="http://localhost/1/fr/category/saglikli-icececekler/">BOISSONS SANTÉ</a></li>
	<li id="menu-item-565" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-565"><a href="http://localhost/1/fr/category/prebiyotikler/">PRÉBIOTIQUES</a></li>
	<li id="menu-item-568" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-568"><a href="http://localhost/1/fr/category/yararli-bitkiler/">PLANTES BÉNÉFIQUES</a></li>
</ul>
<span class="sub-toggle"> <i class="fa fa-caret-down"></i> </span></li>
<li id="menu-item-540" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-540"><a href="#">MÉDECINE ALTERNATIVE</a></li>
<li id="menu-item-541" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-541"><a href="#">STRESS</a></li>
<li id="menu-item-542" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-542"><a href="#">SANTÉ DES YEUX</a></li>
<li id="menu-item-543" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-543"><a href="#">SANTÉ DES YEUX</a></li>
<li id="menu-item-538" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-538"><a href="#">EXERCICE</a>
<ul class="sub-menu">
	<li id="menu-item-570" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-570"><a href="http://localhost/1/fr/category/egzersizin-faydalari/">AVANTAGES DE L'EXERCICE</a></li>
	<li id="menu-item-571" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-571"><a href="http://localhost/1/fr/category/fitness/">REMISE EN FORME</a></li>
	<li id="menu-item-572" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-572"><a href="http://localhost/1/fr/category/kardio/">CARDIO</a></li>
	<li id="menu-item-573" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-573"><a href="http://localhost/1/fr/category/kosu/">COURSE</a></li>
	<li id="menu-item-574" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-574"><a href="http://localhost/1/fr/category/krossfit/">CROSSFIT</a></li>
</ul>
<span class="sub-toggle"> <i class="fa fa-caret-down"></i> </span></li>
<li id="menu-item-555" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-555"><a href="#">SANTÉ SEXUELLE</a>
<ul class="sub-menu">
	<li id="menu-item-582" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-582"><a href="http://localhost/1/fr/category/cinsel-saglik-sorunlari/">QUESTIONS DE SANTÉ SEXUELLE</a></li>
	<li id="menu-item-583" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-583"><a href="http://localhost/1/fr/category/cinsel-hastaliklar/">MALADIES SEXUELLES</a></li>
	<li id="menu-item-584" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-584"><a href="http://localhost/1/fr/category/dogum-kontrolu/">CONTRACEPTION</a></li>
	<li id="menu-item-585" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-585"><a href="http://localhost/1/fr/category/cinsel-problemler/">PROBLÈMES SEXUELS</a></li>
	<li id="menu-item-586" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-586"><a href="http://localhost/1/fr/category/libido/">LIBIDO</a></li>
</ul>
<span class="sub-toggle"> <i class="fa fa-caret-down"></i> </span></li>
<li id="menu-item-537" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-537"><a href="http://localhost/1/fr/hakkimizda/">GROSSESSE ET ACCOUCHEMENT</a>
<ul class="sub-menu">
	<li id="menu-item-578" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-578"><a href="http://localhost/1/fr/category/hamilelik-belirtileri/">SYMPTÔMES DE GROSSESSE</a></li>
	<li id="menu-item-579" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-579"><a href="http://localhost/1/fr/category/hamilelik-kaplikasyonlari/">COMPLICATIONS DE GROSSESSE</a></li>
	<li id="menu-item-580" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-580"><a href="http://localhost/1/fr/category/hamilelikte-beslenme/">NUTRITION PENDANT LA GROSSESSE</a></li>
	<li id="menu-item-581" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-581"><a href="http://localhost/1/fr/category/dogum-cesitleri/">TYPES D'ACCOUCHEMENT</a></li>
</ul>
<span class="sub-toggle"> <i class="fa fa-caret-down"></i> </span></li>
</ul></div>
			</div>
		</nav>

Menü'de yazılar biraz uzun olduğu için yazılar alta geliyor acaba bunu menü'de tek satırda gösterebilirmiyim?, fark ettiyseniz menu grubu ordada sağa ve sola hizalanma yapabilirsem alta geçen menü isimleri tek satırda olacağına eminim.

Worpress kullanıyorum Localhost ortamında çalıştığım için siteye şuan erişim yapamazsınız o yüzden screen paylaşımı ile göstermek istedim, Header'a ait code kısmınıda ekliyorumdaki belki bir fikir verirsiniz.

Minik bir öneri;

Mümkün olduğunda sorunuzu detaylandırmanız yerinde olur...

BEYAZMASTER adlı üyeden alıntı

Minik bir öneri;

Mümkün olduğunda sorunuzu detaylandırmanız yerinde olur...

Bu nedir, bilinen bir cms midir!?
Öyle ise ben ilk kez görüyorum.
Değilse css ve html kodlarını paylaşmalısınız...
Ki; sorunuzu okuyanlar boşuna 30 saniyesini kaybetmesin ve size faydalı olabilme yolu açılsın...

Normalde bu cevabı yazmaya bile vakit ayırmazdım.

Ama bugüne dek bana yanıt vererek katkıda bulunan forumdaşlarımızdan dolayı foruma karşı kendimi bir nebze borçlu hisettiğim için bu borcun birazcığını size bu hatırlatmayı, katkıyı yaparak ödemeden geöme diyen iç sesimi duymazdan gelemedim...

Kolay gelsin...

 

 bilgileriniz için çok teşekkür ederim postu güncelledim.

Anarchosa adlı üyeden alıntı

 bilgileriniz için çok teşekkür ederim postu güncelledim.

 

Estafurullah...

Sorunun kendisine dair şunları söyleyeyim;

Bu matematiksel bir sorun...

Sınırlı bir genişliğe o sınırları aşan bir takım öğeler koyarsanız sığmama durumu ve taşma kaçınılmaz olur...

Çözüm önerilerim;

* Açılır menünüz zaten var, "sante" ile başlayanları da tek başlıkta birleştirebilirsiniz ama sanırım bunu tercih etmemişsiniz...

* Menüye yatay => overflow-x: auto; değeri verebilirsiniz... (Çok şık olmayabilir...)

<div class="menu-primary-container" style="overflow-x: auto;">

* Çift katı kabul edip tüm santeleri altta gösterebilirsiniz.

  text-align: justify;   &   display: flex ile ortalanmalarını sağlayabilirsiniz...

  https://css-tricks.com/almanac/properties/j/justify-content/



Şimdilik aklıma gelenler bunlar...

Öncelikle birinci sorun width. Width değerini px cinsinden verirseniz küçük ekranlarda taşma yapacak büyük ekranlarda küçük kalacaktır. Width değeri yüzdesel olarak verilmelidir. Responsive için. İkinci sorun menü taşmasının önüne geçmeniz için her boyuttaki ekran için ayrı css yazmanız gerekmektedir. Çünkü şu an bu menü sizin ekranda aşağıya düşmüş ama belki benim ekranda düşmeyecek. Veya bunu sizin ekrana göre düzelttik diyelim daha küçük bir laptop ekranında yine alta düşecektir.