0

mi código HTML es el siguiente:

.nav-header {
  position: relative;
  float: left;
  width: 100%;
  z-index: 100;
  bottom: 20px;
}

#fh5co-menu-wrap .sf-menu a {
  padding: 1em .75em;
}
<div id="fh5co-wrapper">
    <div id="fh5co-page">
    <div id="fh5co-header">
        <header id="fh5co-header-section">
            <div class="container">
                <div class="nav-header">
                    <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
                    <!-- <h1 id="fh5co-logo"><a href="index.html">Show<span>IT</span></a></h1> -->
                    <!-- START #fh5co-menu-wrap -->
                    <nav id="fh5co-menu-wrap" role="navigation">
                        <ul class="sf-menu" id="fh5co-primary-menu">
                            <li class="active"><a href="#home">Home</a></li>
                            <li><a href="#servicios" class="fh5co-sub-ddown">Servicios</a></li>
                            <li><a href="#proyectos" class="fh5co-sub-ddown">Equipo</a></li>
                            <li><a href="#contacto">Contacto</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
    </div>

He estado intentando modificar la clase .nav-header pero realmente no he conseguido centrarlo. Si alguien puede ayudarme, realmente lo agradecería. Muchas gracias.

13
  • Cuando dices "centrar" no queda claro a que te refieres... ¿centrar al centro de la página? ¿en una sola línea o en varias?
    – track3r
    el 30 abr. 2018 a las 7:41
  • Centrar al medio de la página, exactamente. Obviamente de manera horizontal, que quede en la misma barra de menu pero al centro. el 1 may. 2018 a las 17:03
  • En ese caso tienes que decir que el ul mide por ejemplo 200px y luego un margin:0 auto lo centrará, sería: .sf-menu { width: 200px; margin: 0 auto; }
    – track3r
    el 1 may. 2018 a las 18:43
  • Encontre que el menu tiene todo esto: /* Superfish Override Menu */ .sf-menu { margin: 0 !important; } .sf-menu { float: right; } .sf-menu ul { box-shadow: none; border: transparent; min-width: 12em; *width: 12em; } .sf-menu a { color: rgba(255, 255, 255, 0.5); padding: 0.75em 1em !important; font-weight: normal; border-left: none; border-top: none; border-top: none; text-decoration: none; zoom: 1; font-size: 18px; border-bottom: none !important; } .sf-menu a:hover, .sf-menu a:focus { color: #fff !important; } el 1 may. 2018 a las 19:10
  • .sf-menu li.active a:hover, .sf-menu li.active a:focus { color: #fff; } .sf-menu li, .sf-menu ul li, .sf-menu ul ul li, .sf-menu li:hover, .sf-menu li.sfHover { background: transparent; } .sf-menu ul li a, .sf-menu ul ul li a { text-transform: none; padding: 0.25em 1em !important; letter-spacing: 1px; } .sf-menu li:hover a, .sf-menu li.sfHover a, .sf-menu ul li:hover a, .sf-menu ul li.sfHover a, .sf-menu li.active a { color: #fff; } .sf-menu ul li:hover, .sf-menu ul li.sfHover { background: transparent; } el 1 may. 2018 a las 19:11

3 respuestas 3

2

Como no me queda claro a qué te refieres con centrar, asumo que lo quieres poner en línea pues un menú como ese en el centro no tendría excesivo sentido. (Al menos en formato de escritorio.)

Añadir al CSS:

#fh5co-menu-wrap ul li {
  display:inline;
}

Deberás retirar la propiedad bottom del .nav-header. (Que además está repetida.)

EDICIÓN PARA LA RESPUESTA

    .nav-header {
      position: relative;
      float: left;
      width: 100%;
      z-index: 100;
      bottom: 20px;
    }

    #fh5co-menu-wrap .sf-menu a {
      padding: 1em .75em;
    }
    
    ul {
      margin-left: auto;
      margin-right: auto;
      width: 100px;
    }
  <div id="fh5co-wrapper">
        <div id="fh5co-page">
        <div id="fh5co-header">
            <header id="fh5co-header-section">
                <div class="container">
                    <div class="nav-header">
                        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
                        <!-- <h1 id="fh5co-logo"><a href="index.html">Show<span>IT</span></a></h1> -->
                        <!-- START #fh5co-menu-wrap -->
                        <nav id="fh5co-menu-wrap" role="navigation">
                            <ul class="sf-menu" id="fh5co-primary-menu">
                                <li class="active"><a href="#home">Home</a></li>
                                <li><a href="#servicios" class="fh5co-sub-ddown">Servicios</a></li>
                                <li><a href="#proyectos" class="fh5co-sub-ddown">Equipo</a></li>
                                <li><a href="#contacto">Contacto</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        </div>

8
  • Es centrar el menu al centro del navegador, como que no tiene sentido?. Centrar de manera horizontal, no vertical el 1 may. 2018 a las 17:02
  • #fh5co-menu-wrap { position: relative; z-index: 2; display: block; float: right; margin-top: 22px; } #fh5co-menu-wrap .sf-menu a { padding: 1em .75em; } el 1 may. 2018 a las 19:13
  • Esos son los atributos que tienen esas dos clases el 1 may. 2018 a las 19:14
  • ¿Estamos hablando en versión de escritorio o en la de móviles?
    – user85192
    el 2 may. 2018 a las 6:05
  • Versión de escritorio :/ el 4 may. 2018 a las 2:27
2

Recomendaría usar display: inline-block de esa forma a parte de padding podrás usar margin también y le dará más flexibilidad al diseño.

Además, hay que recordar que trabajando con elementos inline los retornos de carro en el código se consideran caracteres, por lo que ocupan un espacio no controlado. Para solucionarlo y mantener el sangrado (indentado) del HTML se puede hacer lo siguiente:

<style>
    #fh5co-menu-wrap {
       font-size: 0; /*escondemos todo el texto contenido, incluido los espacios*/
    }
    #fh5co-menu-wrap ul li {
       display:inline-block;
       font-size: 1rem; /*damos el tamaño al texto de los items del menú*/
margin: 2px;
       padding: .75em;
       border: solid 1px #ccc;
       
    }
   .nav-header {
       /*position: relative;
       float: left;
       width: 100%;
       z-index: 100;
       bottom: 20px;*//*Estoy convencido que todo este código es prescindible y/o se puede solucionar de alguna manera más sencilla*/
    }
    /*#fh5co-menu-wrap .sf-menu a {
       padding: 1em .75em;
    }*//*Pasamos el padding al li padre*/
    ul {
       margin-left: auto;
       margin-right: auto;
       width: 500px;
       text-align: center;
    }
</style>

<div id="fh5co-wrapper">
    <div id="fh5co-page">
        <div id="fh5co-header">
            <header id="fh5co-header-section">
                <div class="container">
                    <div class="nav-header">
                        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
                        <nav id="fh5co-menu-wrap" role="navigation">
                            <ul class="sf-menu" id="fh5co-primary-menu">
                                <li class="active"><a href="#home">Home</a></li>
                                <li><a href="#servicios" class="fh5co-sub-ddown">Servicios</a></li>
                                <li><a href="#proyectos" class="fh5co-sub-ddown">Equipo</a></li>
                                <li><a href="#contacto">Contacto</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        </div>
    </div>
</div>

0

El código de AsierR es bueno, añado las modificaciones oportunas para mostrar los elementos en la misma línea y de forma centrada horizontalmente:

<style>
    #fh5co-menu-wrap ul li {
        display:inline;
    }
   .nav-header {
       position: relative;
       float: left;
       width: 100%;
       z-index: 100;
       bottom: 20px;
    }
    #fh5co-menu-wrap .sf-menu a {
       padding: 1em .75em;
    }
    ul {
       margin-left: auto;
       margin-right: auto;
       width: 500px;
       text-align: center;
    }
</style>

<div id="fh5co-wrapper">
    <div id="fh5co-page">
        <div id="fh5co-header">
            <header id="fh5co-header-section">
                <div class="container">
                    <div class="nav-header">
                        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
                        <nav id="fh5co-menu-wrap" role="navigation">
                            <ul class="sf-menu" id="fh5co-primary-menu">
                                <li class="active"><a href="#home">Home</a></li>
                                <li><a href="#servicios" class="fh5co-sub-ddown">Servicios</a></li>
                                <li><a href="#proyectos" class="fh5co-sub-ddown">Equipo</a></li>
                                <li><a href="#contacto">Contacto</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        </div>
    </div>
</div>

4
  • Esto realmente era !! Voy a ver si me funciona, porque como comenté antes, hay muchas clases y quizás se están superponiendo unas sobre otras el 6 may. 2018 a las 23:53
  • .sf-menu { margin: 0 !important; } .sf-menu { float: right; } .sf-menu ul { box-shadow: none; border: transparent; min-width: 12em; *width: 12em; } .sf-menu li, .sf-menu ul li, .sf-menu ul ul li, .sf-menu li:hover, .sf-menu li.sfHover { background: transparent; } .sf-menu ul li a, .sf-menu ul ul li a { text-transform: none; padding: 0.25em 1em !important; letter-spacing: 1px; } .sf-menu li:hover a, .sf-menu li.sfHover a, .sf-menu ul li:hover a, .sf-menu ul li.sfHover a, .sf-menu li.active a { color: #fff; } el 6 may. 2018 a las 23:57
  • .sf-menu ul li:hover, .sf-menu ul li.sfHover { background: transparent; } .sf-menu ul li { background: transparent; } el 6 may. 2018 a las 23:58
  • Ya está o quieres decirnos lago con ese código?
    – user85192
    el 7 may. 2018 a las 6:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.