Jump to content

Adaptation css menu sur différentes résolutions


Recommended Posts

Bonsoir,

sur certaines tailles d'écran, les catégories de mon menu horizontal s'affichent sur 2 lignes.

Afin d'y remédié il m'a été conseillé de réduire la taille de la police du menu pour les résolutions concernées ? 

Voici le code de base de mon menu :

.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color: #fff!important;
    text-transform: uppercase;
    font: 500 1rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}

j'ai donc mis ce code 


@media (min-width: 992px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}



@media (min-width: 576px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

mais quel que soit la résolution, la taille qui s'affiche est 0.8 ^^

 

Un petit coup de main serait le bienvenu ? :) merci

Link to comment
Share on other sites

lol ok ^^ merci bien :)

Bon j'ai rectifié
 

@media (max-width: 1200px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1.02rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width: 992px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.9rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width:576px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

J'ai ma résolution entre 992px et 1200px qui reste sur 2 lignes. Il y a autre chose qui divague dans mon code 

Edited by sevsev (see edit history)
Link to comment
Share on other sites

Ben non, toujours logique^^

Commencez par faire votre règle générale (Au-dessus de 1200, donc pa besoin de préciser le @media)

et dans la règle du max-width 1200 mettez 1rem en remplaçant le 1200 par la résolution qui provoque le changement (dans le 1100 je pense)

Link to comment
Share on other sites

Encore merci pour votre aide et votre temps ;)

Je ne comprends pas car c'est entre 992px et 1200px que ca merdouille ^^

Entre ces 2 résolutions ma font: 1.02rem....

 

.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1.02rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}

@media (max-width: 1100px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width: 992px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.9rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

@media (max-width:576px){
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

 

Edited by sevsev (see edit history)
Link to comment
Share on other sites

J'ai essayé de mettre ceci, mais ça ne fonctionne pas :

.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 1.02rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}

@media (min-width: 992px) and (max-width: 1200px) {
.menu .top-menu a[data-depth="0"], .menu .menu-specials, .menu .menu-news {
    color:#ffffff!important;
text-transform: uppercase;
    font: 500 0.8rem/1 Montserrat,sans-serif;
    text-shadow: none;
    padding: 1rem 1rem;
}}

Dans ma console (F12) la règle générale est appliquée pour la résolution entre 992 et 1200px ! 

J'ai vidé mon cache...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...