[Résolu] Menu récalcitrant sur mobile

aruhuno

Bonjour à tous !

Je travail actuellement sur un nouveau projet en partant du style de base de PluXML.
Afin d'avoir quand même un design personnalisé, j'utilise en plus un CSS avec des !important pour les quelques modifications que je fais sur le style de base de PluXML.

Sur la capture suivante, vous pouvez voir que le menu n'est plus vertical comme sur le thème de base de PluXML avec des résolutions très faibles.
Pour reproduire, il suffit de réduire au maximum la fenêtre de votre navigateur.



Ci-dessous, vous trouverez le code de mon menu personnalisé (CSS+HTML).

[== CSS ==]
nav .content ul {
	padding-left: 2% !important;
}

nav .content ul li {
	margin-bottom: 7px !important;
	float: left !important;
	position: relative !important;
	list-style: none !important;
	display: inline;
}

nav .content ul li a {
	display: block !important;
	text-decoration: none !important;
}

nav .content ul li ul {
	display: none !important;
}

nav .content ul li:hover ul {
	display: block !important;
	position: absolute !important;
	z-index: 1 !important;
	background: #222 !important;
	-moz-box-shadow: 0px 4px 3px 0px #424242 !important;
		-webkit-box-shadow: 0px 4px 3px 0px #424242 !important;
			box-shadow: 0px 4px 3px 0px #424242 !important;
	-webkit-border-radius: 6px !important;
		-moz-border-radius: 6px !important;
			border-radius: 6px !important;
}

nav .content ul li ul:before {
	content: "" !important;
	position: absolute !important;
}

nav .content ul li ul li {
	float: none !important;
	white-space: nowrap !important;
	display: block !important;
}

nav .content ul li:hover ul li a {
	background: transparent !important;
	border: none !important;
	padding: 0 10px 0 10px !important;
	font-size: 16px !important !important;
}

nav .content ul li ul li a:hover {
	color: #7f7f7f !important;
}

[== HTML ==]
<nav role="navigation">

		<div class="content">

			<ul>
				<li class="active">
					<a href="" title="Retour &agrave; l'accueil">Accueil</a>
				</li>
				
<li>
<a href="#" title="" class="noactive">Dossiers</a>
<ul>
<li><a href="article/15/lorem-ipsum-mollis-class-ullamcorper-odio-sem-libero.html" title="lorem ipsum mollis class ullamcorper, odio sem libero.">lorem ipsum mollis class ullamcorper, odio sem libero.</a></li><li><a href="article/7/lorem-ipsum-urna-ante-lorem.html" title="lorem ipsum urna ante, lorem.">lorem ipsum urna ante, lorem.</a></li><li><a href="article/4/lorem-ipsum-vitae-enim-massa-pharetra.html" title="lorem ipsum vitae enim, massa pharetra.">lorem ipsum vitae enim, massa pharetra.</a></li><li><a href="article/16/lorem-ipsum-luctus-quisque-urna.html" title="lorem ipsum luctus quisque, urna.">lorem ipsum luctus quisque, urna.</a></li><li><a href="article/8/lorem-ipsum-viverra-sodales.html" title="lorem ipsum viverra, sodales.">lorem ipsum viverra, sodales.</a></li><li><a href="article/18/lorem-ipsum-vel-est.html" title="lorem ipsum vel, est.">lorem ipsum vel, est.</a></li><li><a href="article/14/lorem-ipsum-dictum-risus-habitasse.html" title="lorem ipsum dictum risus, habitasse.">lorem ipsum dictum risus, habitasse.</a></li><li><a href="article/3/lorem-ipsum-ligula-sagittis-molestie-nisi-mollis.html" title="lorem ipsum ligula sagittis molestie, nisi mollis.">lorem ipsum ligula sagittis molestie, nisi mollis.</a></li><li><a href="article/6/lorem-ipsum-suspendisse-sagittis.html" title="lorem ipsum suspendisse, sagittis.">lorem ipsum suspendisse, sagittis.</a></li><li><a href="article/20/lorem-ipsum-cras-congue-torquent-sapien.html" title="lorem ipsum cras congue, torquent sapien.">lorem ipsum cras congue, torquent sapien.</a></li><li><a href="article/9/lorem-ipsum-imperdiet-quis.html" title="lorem ipsum imperdiet, quis.">lorem ipsum imperdiet, quis.</a></li><li><a href="article/5/lorem-ipsum-primis-pellentesque-velit-mattis-tincidunt-nullam.html" title="lorem ipsum primis pellentesque velit, mattis tincidunt nullam.">lorem ipsum primis pellentesque velit, mattis tincidunt nullam.</a></li><li><a href="article/12/lorem-ipsum-ligula-etiam-ut-vulputate.html" title="lorem ipsum ligula etiam, ut vulputate.">lorem ipsum ligula etiam, ut vulputate.</a></li><li><a href="article/21/lorem-ipsum-semper-faucibus-quisque-nullam-purus.html" title="lorem ipsum semper faucibus quisque, nullam purus.">lorem ipsum semper faucibus quisque, nullam purus.</a></li><li><a href="article/19/lorem-ipsum-taciti-egestas-pretium-interdum.html" title="lorem ipsum taciti egestas, pretium interdum.">lorem ipsum taciti egestas, pretium interdum.</a></li><li><a href="article/13/lorem-ipsum-lorem-consectetur-quis.html" title="lorem ipsum lorem consectetur, quis.">lorem ipsum lorem consectetur, quis.</a></li><li><a href="article/10/lorem-ipsum-auctor-molestie-curabitur.html" title="lorem ipsum auctor molestie, curabitur.">lorem ipsum auctor molestie, curabitur.</a></li><li><a href="article/11/lorem-ipsum-nunc-morbi-fermentum-lobortis-vitae-habitasse.html" title="lorem ipsum nunc morbi fermentum, lobortis vitae habitasse.">lorem ipsum nunc morbi fermentum, lobortis vitae habitasse.</a></li><li><a href="article/2/lorem-ipsum-bibendum-feugiat-hac-donec-faucibus.html" title="lorem ipsum bibendum feugiat hac, donec faucibus.">lorem ipsum bibendum feugiat hac, donec faucibus.</a></li><li><a href="article/17/lorem-ipsum-sodales-facilisis-augue-neque.html" title="lorem ipsum sodales facilisis, augue neque.">lorem ipsum sodales facilisis, augue neque.</a></li>
</ul>
</li>
<li>
<a href="#" title="" class="noactive">Astuces</a>
<ul>
<li><a href="article/22/windows-eight.html" title="Windows Eight">Windows Eight</a></li>
</ul>
</li>
				<li id="static-2"><a href="2-l-association.html" class="noactive" title="L&#039;association">L&#039;association</a></li>			</ul>

		</div>

	</nav>

Si je dois exporter mon thème sur un PluXML vide, n'hésitez pas.
Merci d'avance pour l'aide apportée =]

alan

Bonjour,

Est-ce que tu as déjà résolu ton problème ? Si non, est-ce qu'on peut avoir un lien vers ce site ?

aruhuno

Je ne peux pas fournir le lien pour l'instant, j'essaye de développé ça de façon confidentielle ^^

En fait, je pense le contourner en utilisant le categorie.php pour lister les articles de la catégorie en question.
Je vais regarde ce qu'on peut faire avec la barre de recherche de PluXML, histoire de voir si on peut faire une recherche que dans une catégorie =]

Je marque résolu, même si ça ne l'est pas totalement ^^

tanrouge

Hello. Pourquoi mettre un display:inline; pour "nav .content ul li" ? Si tu veux que le menu revienne à la ligne, il faut mettre un display:block;