Barre de liens sur une seule ligne avec Twenty-twelve (Créer un compte)

  • Statut : non résolu
5 sujets de 1 à 5 (sur un total de 5)
  • Auteur
    Messages
  • #558016
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 4.4
    – Version de PHP/MySQL : v5.5
    – Thème utilisé : Thème enfant de Twenty Twelve
    – Extensions en place :
    AntiVirus
    Foo Gallery
    Jetpack by WordPress.com
    MailPoet Newsletters
    Master Slider
    Media Library Assistant
    Meta Slider
    Page Builder by SiteOrigin
    Responsive Add Ons
    SiteOrigin Widgets Bundle
    WP Lightbox 2

    – Nom de l’hebergeur : OVH
    – Adresse du site : http://www.lgphotography.fr

    Problème(s) rencontré(s) :

    Avec le thème Twenty-twelve, lorsque que l’on réduit la taille de l’écran, la barre de liens horizontale passe sur deux lignes, avant de se transformer en un bouton “menu”.

    Je préférerais que la taille (largeur/police) de la barre de liens diminue pour pour qu’elle reste sur une seule ligne.

    Je n’ai pas trouvé comment faire, est-ce que quelqu’un peut m’aider ?

    Je ne sais pas si ça change quelque chose, mais pour info, j’ai déjà un déjà CSS modifié pour augmenter la largeur du thème et quelques autres personnalisations que j’ai faites :

    /*__________ Mint Cream Flavor child twentytwelve __________*/
    .site-header,
    footer[role=”contentinfo”] {
    	background: white;
    }
    
    footer[role=”contentinfo”] {
    	border: 0;
    	padding-top: 48px;
    }
    
    body .site {
    	margin: 0;
    	padding: 0;
    	box-shadow: none;
    }
    
    .site-content article {
    	margin-bottom: 24px;
    }
    
    .wrapper {
    	margin-top: 12px;
    }
    
    .site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    	padding-left: 10px;
    	padding-right: 10px;
    }
    
    @media screen and (min-width: 600px) {
    	.site-header {
    		padding: 4px 0 0;
    	}
    	
    	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    		border: 0;
    	}
    	
    	.wrapper {
    		margin-top: 2px;
    	}
    	
    	body .site, footer[role=”contentinfo”] {
    		max-width: 100%;
    	}
    	
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		margin-left: auto;
    		margin-right: auto;
    		max-width: 920px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    }
    
    @media screen and (min-width: 960px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		max-width: 940px;
    		padding-left: 0;
    		padding-right: 0;
    	}
    }
    
    @media screen and (min-width: 980px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		max-width: 960px;
    	}
    }
    
    /*__________ end Mint Cream adjustments __________*/
    /*__________ Couleur du menu deroulant (liens) __________*/
    .main-navigation li ul li a {
    	background: rgba(255,255,255,0.85) none repeat scroll 0 0;
    	border-bottom: 1px solid #B6B6B6;
    	display: block;
    	font-size: .785714rem;
    	line-height: 2.18182;
    	padding: .571429rem .714286rem;
    	width: 12.8571rem;
    	white-space: normal;
    }
    
    /*__________ Fin Couleur du menu deroulant (liens) __________*/
    a {
    	outline: medium none;
    	color: #636363;
    }
    
    /*__________ Taille champs Forulaire de contact Contact Form 7 __________*/
    input[type=”textarea”], textarea {
    	width: 100%;
    }
    
    /*__________ Fin Taille champs Forulaire de contact Contact Form 7 __________*/
    .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    	box-shadow: none;
    }

    Merci pour votre aide !

    #1035560
    Flobogo
    Modérateur
    Maître WordPress
    16262 contributions

    Bonjour,

    Voilà ce qu’il faudrait mettre pour réduire la taille de la police :

    @media screen and (max-width: 960px) {
    .nav-menu a {font-size: 80%;}
    }

    A ajouter dans le Custom CSS. Si besoin, faire varier 960px

    Bon, il y a un moment où ça repassera sur 2 lignes, mais franchement, avec font-size: 70%; c’est trop petit !

    Comme je vous l’ai dit, le menu doit rester lisible sur écran de taille moyenne. Réduire la police le rend moins lisible !

    C’est plutôt le slider qu’il faudrait supprimer sur écran moyen et smartphones, car il ne s’adapte pas !

    #1035561
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Super, le résultat est déjà pas mal, merci beaucoup !
    En effet, pas besoin de réduire plus, ça devient très petit.

    Savez-vous quelle est la balise à utiliser pour faire la même chose avec la police du titre ?

    #1035562
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Pour compléter : du titre du site.
    Merci beaucoup !

    #1035563
    Flobogo
    Modérateur
    Maître WordPress
    16262 contributions

    Pour trouver ce qu’il faut modifier, vous pouvez installer “Firebug” pour Firefox ou Chrome ou bien utiliser la fonction “inspecter l’élément” (accessible par clic droit) –> cela permet d’afficher les règles CSS appliquées aux éléments du site pour voir ce qu’il faut modifier, on peut même tester les modif’ en direct.
    Voici un tuto simple pour Firebug et un tuto plus complet

    Il faut également vous informer un peu sur le CSS, par exemple avec le site CSS-débutant. Vous comprendrez mieux comment ça fonctionne.

    Enfin, pour finaliser vos modifications (dans Firebug, c’est juste pour tester), il faut les reporter dans la partie “Custom CSS” (CSS personnalisé) si le thème en dispose.
    Sinon, on peut les mettre dans le fichier style.css du thème. Sauf que lors d’une mise à jour du thème, vos modif’ seront perdues. Donc, il vaut mieux les reporter dans le fichier style.css d’un thème-enfant.

5 sujets de 1 à 5 (sur un total de 5)
  • Vous devez être connecté pour répondre à ce sujet.