28172 sujets

CSS et mise en forme, CSS3

http://www.apglsf.com/
Bonjour, j'ai terminé ce site sous Wordpress. Dans le thème choisi, il n'y avait qu'un seul menu, j'ai alors ajouter celui dans la barre bleu en haut. Le menu fonctionne très bien, mais je suis incapable de le rendre responsive. Présentement, il n'apparait plus.
Je vous donne le code ici, mais c'est un menu WordPress.


#menutopnav ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	/*padding:0 5px 0 5px;*/
	text-align:right;
	position:relative;
}

#menutopnav ul a
{
	display:block;
	color:white;
	text-decoration:none;
	top: 53px;
	padding-right:10px;
	padding-left:10px;
}

#menutopnav ul li
{
	position:relative;
	float:left;
	margin:0;
	padding-right:10px;
	padding-left:10px;
}

#menutopnav ul li.current-menu-item
{
	background:#16587a;
	padding-right:10px;
	padding-left:10px;
	position:relative;
}

#menutopnav ul li:hover
{
	background:#147aad;
	/*padding-left:15px;*/
	padding-right:10px;
	padding-left:10px;
}

#menutopnav ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#a0cee5;
	padding:0;
	text-align:left;
}

#menutopnav ul ul li
{
	float:none;
	width:250px;
	text-align:left;
	padding-left:15px;
}

#menutopnav ul ul a
{
	line-height:120%;
	text-align:left;
	color:#0D3C55;
	padding-left:15px;
}

#menutopnav ul ul a:hover
{

	color:white;
	padding-left:15px;
}

#menutopnav ul ul ul
{
	top:0;
	left:100%;
}

#menutopnav ul li:hover > ul
{
	display:block
}

.menu-top-container .menu-item-has-children > a {
    margin-right: 0px!important;
}

/****/

/**** RESPONSIVE TOP */

/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul#menu-top {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    #menu-top li#menu-item {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul#menu-top li#menu-item, li#menu-item a {
        width: 100%;
    }
	
	.show-menu {
        display:block;
    }
}


/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}



                    	<nav id="menutopnav">

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
					
							<?php wp_nav_menu( array( 'theme_location' => 'top' ) ); ?>
    					</nav>



Merci pour votre aide
mais si tu mets un
display: none;
sur
ul#menu-top 
..
C'est normal qu il ne s'affiche pas , non?

Tu essais au juste de faire quoi, menu hamburger ou juste un menu qui s'adapte à la taille d’écran?
Modifié par justrundesign (23 May 2018 - 16:01)