Como centrar los botones del menu principal de OpenCart desde el stylesheet.css

Genero una pregunta pensando que entiende del tema propiamente de la plataforma opencart 2.0, la pregunta es cómo hago para centrar los botone del menú principal de la plataforma, pues por defecto vienen alineados a la izquierda, el código stylesheet.css pendiente al menú aquí lo pego, pues no manejo css. Lo he intentado en la comunidad pro no me dan respuesta. Estaré pendiente a cualquier ayuda.

#menu {
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
min-height: 40px;
}
#menu .nav > li > a {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
padding: 10px 15px 10px 15px;
min-height: 15px;
background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
padding-bottom: 0;
}
#menu .dropdown-inner {
display: table;
}
#menu .dropdown-inner ul {
display: table-cell;
}
#menu .dropdown-inner a {
min-width: 160px;
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #333333;
font-size: 12px;
}
#menu .dropdown-inner li a:hover {
color: #FFFFFF;
}
#menu .see-all {
display: block;
margin-top: 0.5em;
border-top: 1px solid #DDD;
padding: 3px 20px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 3px 3px;
font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
text-decoration: none;
color: #ffffff;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
}
#menu #category {
float: left;
padding-left: 15px;
font-size: 16px;
font-weight: 700;
line-height: 40px;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
font-size: 15px;
font-stretch: expanded;
color: #FFF;
padding: 2px 18px;
float: right;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
color: #ffffff;
background-color: #229ac8;
}
@media (min-width: 768px) {
#menu .dropdown:hover .dropdown-menu {
display: block;
}
}
@media (max-width: 767px) {
#menu {
border-radius: 4px;
}
#menu div.dropdown-inner > ul.list-unstyled {
display: block;
}
#menu div.dropdown-menu {
margin-left: 0 !important;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-inner {
display: block;
}
#menu .dropdown-inner a {
width: 100%;
color: #fff;
}
#menu .dropdown-menu a:hover,
#menu .dropdown-menu ul li a:hover {
background: rgba(0, 0, 0, 0.1);
}
#menu .see-all {
margin-top: 0;
border: none;
border-radius: 0;
color: #fff;
}
}

1 respuesta

Respuesta
1

Si pudieras poner el enlace a la web sería más fácil ayudarte o sino, el código html también, para poder ver la estructura.

Saludos agradeciendo tu interés en mi tema, te envió una instalación demo para que tengas acceso a cpanel y ftp para evaluar a necesidad la plataforma, la idea es que los links de las categorías principales queden centrados sin que se afecte sus funciones Dropdown en los subniveles de las subcategorías.

web: accesserver.com


Cpanel

acceso: http://accesserver.com/cpanel
user: accesserver
pass: ;DC]$2eO47k6

Ftp

user: accesserver
pass: ;DC]$2eO47k6


OpenCart

acceso administraacion: http://accesserver.com/admin

user: admin
Pass: pass

Ok, la desventaja del método que se me ocurre para centrar el menú me obliga a darle una anchura concreta y eso afectará si quieres meter un nuevo elemento en el menú, pero solo sería cambiar el valor del ancho. Solo habría que poner esto en el css.

ul.nav.navbar-nav {

  1. margin: auto;
  2. width: 779px;
  3. float: none;

}

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas