Aide pour placement de menu au centre

[youandyourclothes]

Bonjour,

J'espère que la communauté pourra m'aider. Voilà sur mon blog qui est sous Wordpress, j'ai choisi le thème Toutatis que je trouvais bien. Et il me convient à un seul détail que je n'arrive pas à modifier: le menu.
Je souhaiterai centrer le menu et mettre une bannière afin d'avoir un homme moderne au dessus.
Je vous remercie d'avance pour ceux qui m'aideront et je vos donne le site: http://www.unhommemoderne.fr et le code:

site-header {
  z-index: 500;
  width: 100%;
  font-weight: bold;
  border-bottom: 1px solid rgba(56, 69, 91, 0.1); }
  .site-header .toutatis-logo {
    width: 30%;
    float: left;
    text-align: left;
    padding: 30px 0; }
    @media only screen and (max-width: 800px) {
      .site-header .toutatis-logo {
        width: 100%;
        padding: 20px 0; } }
    .site-header .toutatis-logo a.logo-text {
      font-size: 26px;
      color: #38455b;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: -1px;
      padding: 3px 0;
      display: inline-block; }
    .site-header .toutatis-logo a.logo-img img {
      max-height: 3000px; }
  .site-header #toggle-menu-icon {
    display: none; }
    @media only screen and (max-width: 800px) {
      .site-header #toggle-menu-icon {
        z-index: 100;
        display: block;
        color: #38455b;
        font-size: 26px;
        float: right;
        padding: 0;
        margin: 0px auto;
        cursor: pointer;
        opacity: 1;
        max-height: 36px;
        transition: 0.1s color ease-in; } }
  .site-header .main-menu {
    width: 70%;
    float: left;
    font-family: 'Quicksand', 'sans-serif'; }
    @media only screen and (max-width: 800px) {
      .site-header .main-menu {
        text-align: center;
        float: none;
        width: 100%; } }
    .site-header .main-menu ul.top-level-menu {
      list-style: none;
      z-index: 10;
      position: relative;
      float: right; }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu ul.top-level-menu {
          float: left;
          display: none;
          width: 100%;
          overflow: hidden; } }
      @media only screen and (min-width: 800px) {
        .site-header .main-menu ul.top-level-menu {
          display: block !important; } }
    .site-header .main-menu li {
      display: inline-block;
      position: relative; }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu li {
          display: block;
          padding: 0; } }
      .site-header .main-menu li:last-child {
        padding-right: 0; }
      .site-header .main-menu li:hover > a {
        color: #ff625b;
        box-shadow: -10px -13px 0px -10px #ff625b inset; }
        @media only screen and (max-width: 800px) {
          .site-header .main-menu li:hover > a {
            box-shadow: none !important; } }
      .site-header .main-menu li:hover .sub-menu {
        display: block; }
      @media only screen and (min-width: 800px) {
        .site-header .main-menu li.current-menu-item a {
          color: #ff625b;
          box-shadow: -10px -13px 0px -10px #ff625b inset; }
 }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu li.current-menu-item a {
          color: #ff625b;
          box-shadow: none !important; }
 }
    .site-header .main-menu a {
      display: inline-block;
      color: #38455b;
      padding: 40px 10px;
      text-decoration: none;
      font-size: 16px; }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu a {
          display: block;
          padding: 20px 0px 17px; } }

.site-header .sub-menu {
  position: absolute;
  background: #fff;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  min-width: 200px;
  border: 1px solid rgba(56, 69, 91, 0.1);
  border-top: none; }
  @media only screen and (max-width: 800px) {
    .site-header .sub-menu {
      display: block;
      position: static;
      padding-top: 0;
      border: none;
      border-left: 2px solid rgba(56, 69, 91, 0.1); } }
  .site-header .sub-menu li {
    opacity: 1;
    display: inline-block;
    width: 100%; }
    .site-header .sub-menu li:hover > a, .site-header .sub-menu li.current-menu-item a {
      box-shadow: none; }
    @media only screen and (min-width: 800px) {
      .site-header .sub-menu li:hover > a {
        padding-left: 1em; }
 }
  .site-header .sub-menu a {
    color: #38455b;
    font-size: 14px;
    padding: 12px 10px 14px 10px;
    transition: 0.2s color ease-out;
    transition: 0.2s padding ease-out; }

.site-header .sub-menu a {
  font-size: 16px; }
  @media only screen and (max-width: 800px) {
    .site-header .sub-menu a {
      padding-left: 30px;
      opacity: 1; } }

 

[concombre]

Salut,

<span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br />.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    z</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">index</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 500</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 100</span><span class="syntaxkeyword">%;<br /></span><span class="syntaxdefault">    font</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">weight</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> bold</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    border</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">bottom</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 1px solid rgba</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">56</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> 69</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> 91</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> 0.1</span><span class="syntaxkeyword">);</span><span class="syntaxdefault"> <br /></span><span class="syntaxkeyword">}<br /><br />.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">toutatis</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">logo </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">/*width: 30%;<br />    float: left;*/<br /></span><span class="syntaxdefault">    float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">/*text-align: left;*/<br /></span><span class="syntaxdefault">    padding</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 30px 0</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br /><br />    text</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">align</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">center</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br />    width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;<br />}<br /><br />[...]<br /><br />.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">main</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">menu </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    </span><span class="syntaxcomment">/*width: 70%;<br />    float: left;*/<br /></span><span class="syntaxdefault">    display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">    font</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">family</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> </span><span class="syntaxstring">'Quicksand'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'sans-serif'</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br /></span><span class="syntaxkeyword">}<br /></</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /><br /><br /></span><span class="syntaxdefault"> </span>

 

[youandyourclothes]

Salut, merci pour ta réponse.
Donc à ce que j'ai compris il faut que je supprime le float: left que je modifie widht: 30% et que je passe à 100%. Texte align, je met quoi à la place du left?

Par contre pour le menu, je ne sais pas quoi faire... Peux tu me le détailler si cela ne te dérange pas.

Merci encore

 

[concombre]

En fait, tu as déjà tout. Y aura peut-être qqls réglages à faire sur la partie Media Queries, mais ça doit marcher comme ça.

Tu as juste à remplacer.

<span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /><br /></span><span class="syntaxcomment">/*      ------------------------------- *\<br />        Logo<br />\*      ------------------------------- */<br /><br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">toutatis</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">logo </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">            float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            padding</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> 30px 0</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br />            text</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">align</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">center</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> </span><span class="syntaxcomment">/* centrage du titre, le h1 hérite */<br /></span><span class="syntaxdefault">            width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">}<br /><br /><br /></span><span class="syntaxcomment">/*      ------------------------------- *\<br />        Menu<br />\*      ------------------------------- */<br /><br /></span><span class="syntaxdefault">        </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header </span><span class="syntaxkeyword">.</span><span class="syntaxdefault">main</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">menu </span><span class="syntaxkeyword">{<br /><br /></span><span class="syntaxdefault">            display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">            font</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">family</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> </span><span class="syntaxstring">'Quicksand'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'sans-serif'</span><span class="syntaxkeyword">;</span><span class="syntaxdefault"> <br />        </span><span class="syntaxkeyword">}<br /><br /><br /></</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span>

 

[youandyourclothes]

Bon alors j'ai fait ce que tu m'as dit mais ça donne quelques choses de bizarre je dois t'avouer... Parce que le logo parfait mais le menu et les titres pas du tout. Est ce que tu pense que je me suis trompé quelques part?

.site-header {
  z-index: 500;
  width: 100%;
  font-weight: bold;
  border-bottom: 1px solid rgba(56, 69, 91, 0.1); }
  .site-header .toutatis-logo {
  float:none
   display:block;
    padding: 30px 0; 
    text-align:center; /* centrage du titre, le h1 hérite */
    width:auto;
    @media only screen and (max-width: 800px) {
	
    .site-header .toutatis-logo a.logo-text {
      font-size: 26px;
      color: #38455b;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: -1px;
      padding: 3px 0;
      display: inline-block; }
    .site-header .toutatis-logo a.logo-img img {
      max-height: 3000px; }
  .site-header #toggle-menu-icon {
    display: none; }
    @media only screen and (max-width: 800px) {
      .site-header #toggle-menu-icon {
        z-index: 100;
        display: block;
        color: #38455b;
        font-size: 26px;
        float: right;
        padding: 0;
        margin: 0px auto;
        cursor: pointer;
        opacity: 1;
        max-height: 36px;
        transition: 0.1s color ease-in; } }
  .site-header .main-menu {
		display:block;
		float:none;
        font-family: 'Quicksand', 'sans-serif'; 
        }

    @media only screen and (max-width: 800px) {
      .site-header .main-menu {
        text-align: center;
        float: none;
        width: 100%; } }
    .site-header .main-menu ul.top-level-menu {
      list-style: none;
      z-index: 10;
      position: relative;
      float: right; }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu ul.top-level-menu {
          float: none;
          display: block;
          width: 100%;
          overflow: hidden; } }
      @media only screen and (min-width: 800px) {
        .site-header .main-menu ul.top-level-menu {
          display: block !important; } }
    .site-header .main-menu li {
      display: inline-block;
      position: relative; }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu li {
          display: block;
          padding: 0; } }
      .site-header .main-menu li:last-child {
        padding-right: 0; }
      .site-header .main-menu li:hover > a {
        color: #ff625b;
        box-shadow: -10px -13px 0px -10px #ff625b inset; }
        @media only screen and (max-width: 800px) {
          .site-header .main-menu li:hover > a {
            box-shadow: none !important; } }
      .site-header .main-menu li:hover .sub-menu {
        display: block; }
      @media only screen and (min-width: 800px) {
        .site-header .main-menu li.current-menu-item a {
          color: #ff625b;
          box-shadow: -10px -13px 0px -10px #ff625b inset; }
 }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu li.current-menu-item a {
          color: #ff625b;
          box-shadow: none !important; }
 }
    .site-header .main-menu a {
      display: inline-block;
      color: #38455b;
      padding: 40px 10px;
      text-decoration: none;
      font-size: 16px; }
      @media only screen and (max-width: 800px) {
        .site-header .main-menu a {
          display: block;
          padding: 20px 0px 17px; } }

.site-header .sub-menu {
  position: absolute;
  background: #fff;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  min-width: 200px;
  border: 1px solid rgba(56, 69, 91, 0.1);
  border-top: none; }
  @media only screen and (max-width: 800px) {
    .site-header .sub-menu {
      display: block;
      position: static;
      padding-top: 0;
      border: none;
      border-left: 2px solid rgba(56, 69, 91, 0.1); } }
  .site-header .sub-menu li {
    opacity: 1;
    display: inline-block;
    width: 100%; }
    .site-header .sub-menu li:hover > a, .site-header .sub-menu li.current-menu-item a {
      box-shadow: none; }
    @media only screen and (min-width: 800px) {
      .site-header .sub-menu li:hover > a {
        padding-left: 1em; }
 }
  .site-header .sub-menu a {
    color: #38455b;
    font-size: 14px;
    padding: 12px 10px 14px 10px;
    transition: 0.2s color ease-out;
    transition: 0.2s padding ease-out; }

.site-header .sub-menu a {
  font-size: 16px; }
  @media only screen and (max-width: 800px) {
    .site-header .sub-menu a {
      padding-left: 30px;
      opacity: 1; } }

.header-bar {
  font-weight: bold; }
  .header-bar .header-bar-title {
    padding: 50px 0;
    font-size: 28px;
    font-weight: bold;
    color: #38455b;
    text-transform: uppercase;
    letter-spacing: -1px; }
  .header-bar #site-breadcrumbs {
    margin: -40px 0 50px;
    font-size: 14px; }
    .header-bar #site-breadcrumbs a {
      text-decoration: none; }
      .header-bar #site-breadcrumbs a:hover {
        text-decoration: underline; }

body.admin-bar .site-header {
  top: 32px !important; }

.menu-toggle {
  background: none;
  border: none;
  font-size: 30px;
  display: none; }
  @media only screen and (max-width: 800px) {
    .menu-toggle {
      display: block; } }

 

[concombre]

Oui tu as oublié une }

<span class="syntaxdefault">&nbsp;&nbsp;</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">site</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">header&nbsp;</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">toutatis</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">logo&nbsp;</span><span class="syntaxkeyword">{<br />&nbsp;&nbsp;</span><span class="syntaxdefault">float</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none<br />&nbsp;&nbsp;&nbsp;display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">block</span><span class="syntaxkeyword">;<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">padding</span><span class="syntaxkeyword">:&nbsp;</span><span class="syntaxdefault">30px&nbsp;0</span><span class="syntaxkeyword">;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">text</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">align</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">center</span><span class="syntaxkeyword">;&nbsp;</span><span class="syntaxcomment">/*&nbsp;centrage&nbsp;du&nbsp;titre,&nbsp;le&nbsp;h1&nbsp;hérite&nbsp;*/<br />&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">width</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">auto</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxcomment">/*}*/<br /><br />&nbsp;</span><span class="syntaxdefault"></span>

 

[youandyourclothes]

Je viens de la mettre de cette manière et ça change rien. Désolé d'être si mauvais.

.site-header {
  z-index: 500;
  width: 100%;
  font-weight: bold;
  border-bottom: 1px solid rgba(56, 69, 91, 0.1); }
  .site-header .toutatis-logo {
  float:none
   display:block;
    padding: 30px 0; 
    text-align:center; /* centrage du titre, le h1 hérite */
    width:auto;  }
    @media only screen and (max-width: 800px) {

 

[youandyourclothes]

Ne te prends plus la tête, n'y arrivant pas, j'ai décidé de changer de thème afin de simplifier le problème et vu que l'on m'a dit que le mieux c'était de le changer voilà