Center MENU Bootstrap

Question

Center MENU Bootstrap

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

my HTML code is as follows:

.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>

I've been trying to modify the .nav-header class but I really have not managed to center it. If someone can help me, I would really appreciate it. Thank you very much.

javascript html css3 css bootstrap

asked by Tomas Gañan 30.04.2018 в 00:22

source

2 answers

Insert dynamic map in HTML How do I make the titles of my viewpager multi-language?

score 1 · Answer 1

As it is not clear to me what you mean by focusing, I assume you want to put it online because a menu like that in the center would not make much sense. (At least in desktop format.)

Add to CSS:

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

You must remove the bottom property from the .nav-header. (Which is also repeated.)

EDIT FOR THE ANSWER

    .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>

score 0 · Answer 2

The code of AsierR is good, I add the opportune modifications to show the elements in the same line and in a horizontally centered way:

<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>