Bonjour,
Via Wordpress, j'ai créée un menu déroulant qui se présente de cette manière du côté PHP (dans mon fichier header.php :
Et mon css :
Afin de créer un espacement entre le nom de mes catégories, j'ai ajouté un margin left et right dans .main-navigation li, par conséquent mes sous catégories de menu sont décalées. Comment y remédier ? Merci pour votre aide !
Via Wordpress, j'ai créée un menu déroulant qui se présente de cette manière du côté PHP (dans mon fichier header.php :
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'coucou' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
Et mon css :
.main-navigation {
clear: both;
display: block;
float: center;
width: 100%;
height: 50px;
text-transform: uppercase;
font-size: 80%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
padding-top: 15px;
}
.main-navigation li {
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.main-navigation ul ul {
width: 150px;
padding-top: 10px;
background-color: #FFFFFF;
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul a {
width: 150px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
backgroun d-color: #F2F2F2;
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}
Afin de créer un espacement entre le nom de mes catégories, j'ai ajouté un margin left et right dans .main-navigation li, par conséquent mes sous catégories de menu sont décalées. Comment y remédier ? Merci pour votre aide !