-1

Eu peguei esse menu no seguinte site: Left Slide Menu with Icon, e gostaria de centraliza-lo no meu blogger. Ele ficava em pre, consigo coloca-lo na parte de baixo do blog, mas queria ele no centro da pagina. Como posso centralizá-lo?

@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");
.menu,
.menu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
  z-index: 10;
  overflow: hidden;
  box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}

.menu li a {
  display: inline-block;
  text-indent: -500em;
  height: 5em;
  width: 5em;
  line-height: 5em;
  text-align: center;
  color: #72739f;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}

.menu li a:before {
  font-family: FontAwesome;
  speak: none;
  text-indent: 0em;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 1.4em;
}

.menu li a.search:before {
  content: "\f002";
}

.menu li a.archive:before {
  content: "\f187";
}

.menu li a.pencil:before {
  content: "\f040";
}

.menu li a.contact:before {
  content: "\f003";
}

.menu li a.about:before {
  content: "\f007";
}

.menu li a.home:before {
  content: "\f039";
}

.menu-bar li a:hover,
.menu li a:hover,
.menu li:first-child a {
  background: #267fdd;
  color: #fff;
}

.menu-bar {
  overflow: hidden;
  left: 5em;
  z-index: 5;
  width: 0;
  height: 0;
  transition: all 0.1s ease-in-out;
}

.menu-bar li a {
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  color: #72739f;
  text-decoration: none;
  position: relative;
  font-family: verdana;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}

.menu-bar li:first-child a {
  height: 5em;
  background: #267fdd;
  color: #fff;
  line-height: 5
}

.para {
  color: #033f72;
  padding-left: 100px;
  font-size: 3em;
  margin-bottom: 20px;
}

.open {
  width: 10em;
  height: 100%;
}

@media all and (max-width: 500px) {
  .container {
    margin-top: 100px;
  }
  .menu {
    height: 5em;
    width: 100%;
  }
  .menu li {
    display: inline-block;
  }
  .menu-bar li a {
    width: 100%;
  }
  .menu-bar {
    width: 100%;
    left: 0;
    bottom: 0;
    height: 0;
  }
  .open {
    width: 100%;
    height: auto;
  }
  .para {
    padding-left: 5px;
  }
}

@media screen and (max-height: 34em) {
  .menu li,
  .menu-bar {
    font-size: 70%;
  }
}

@media screen and (max-height: 34em) and (max-width: 500px) {
  .menu {
    height: 3.5em;
  }
}
<ul class="menu">

  <li title="home"><a href="#" class="menu-button home">menu</a></li>

  <li title="search"><a href="#" class="search">search</a></li>
  <li title="pencil"><a href="#" class="pencil">pencil</a></li>
  <li title="about"><a href="#" class="active about">about</a></li>
  <li title="archive"><a href="#" class="archive">archive</a></li>
  <li title="contact"><a href="#" class="contact">contact</a></li>
</ul>

<ul class="menu-bar">
  <li><a href="#" class="menu-button">Menu</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Editorial</a></li>
  <li><a href="#">About</a></li>
</ul>

inserir a descrição da imagem aqui

1
  • Andrea, sua pergunta é um tanto quanto âmpla, recomendo que passe pelo tour pt.stackoverflow.com/tour para aprender como fazer uma pergunta. Commented 7/07/2020 às 12:25

1 Resposta 1

0

Como o position dele está como fixed, trocando a propriedade left você consigue movimentá-lo. Tente colocar dessa forma, lá logo próximo ao position: left: 50%;, para que fique aproximadamente na metade da tela, ou vá ajustando conforme fique melhor centralizado de acordo com o conteúdo do seu blog. Se possível coloque o acesso ao seu blog para que possamos verificar melhor.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .