navbar navbar-toggle

[Clauido José 3]

Bom dia pessoal,

 

Estou com um problema na navbar do site que estou construindo em asp.net com bootstrap bom quero que ele no desctop fique centralizado no meio do navbar mais quando o navbar estiver collapsed ele deve ficar posicionado a esquerda como faço isso vou postar meu codigo:

 

MInha pagina aspx:

<header id="header">

  <div class="row"><div class="logo"><a href="default.aspx">
    <img src="img/logo.png" /></a></div></div>
            
  <nav class="navbar navbar-default" role="navigation"><div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div class="nav-xbootstrap">
        <ul>
          <li><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span>A Empresa</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-wrench"></span>Serviços</a></li>
          <li><a href="javascript:void(0)">
            <span class="glyphicon glyphicon-th-large"></span>
            Persianas<span class="glyphicon glyphicon-chevron-down iconsize"></span></a>
            <ul class="dropdown">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">Javascript</a></li>
              <li><a href="#">JQuery</a></li>
            </ul>
          </li>
          <li><a href="javascript:void(0)">
            <span class="glyphicon glyphicon-th"></span>
            Cortinas<span class="glyphicon glyphicon-chevron-down iconsize"></span></a>
            <ul class="dropdown">
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
              <li><a href="#">Javascript</a></li>
              <li><a href="#">JQuery</a></li>
            </ul>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-globe"></span>Parceiros</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>Contato</a></li>
        </ul>
      </div>
      </nav>
    </header>

Meu css:

 

/* navbar */
.navbar-default {
	background: -moz-linear-gradient(top,  #CCC 80%, #fefefd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #CCC 80%,#fefefd 100%); /* W3C */
}

.nav-xbootstrap {
    display: block;
    margin-bottom: 15px 0;
    background: -moz-linear-gradient(top,  #CCC 80%, #fefefd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #CCC 80%,#fefefd 100%); /* W3C */
    border-radius: 3px;
    text-align:center
}
.iconsize {
    font-size: 12px; 
    top: 2px; 
    left: 3px;
}

.nav-xbootstrap ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}

.nav-xbootstrap li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #def1f0;
}

.nav-xbootstrap li a {
  padding: 15px 20px;
  font-size: 16px;
  color: #000;
  display: inline-block;
  outline: 0;
  font-weight: 400;
  text-decoration: none;
}

.nav-xbootstrap li:hover ul.dropdown { 
    display: block; 
}

.nav-xbootstrap li ul.dropdown {
    position: absolute;
    display: none;
    width: 200px;
    background: -moz-linear-gradient(top,  #CCC 80%, #fefefd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f1), color-stop(100%,#fefefd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #CCC 80%,#fefefd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #CCC 80%,#fefefd 100%); /* W3C */
    padding-top: 0;
}

.nav-xbootstrap li ul.dropdown li {
  display: block;
  list-style-type: none;
}

.nav-xbootstrap li ul.dropdown li a {
    padding: 15px 20px;
    font-size: 16px;
    color: #000;
    display: block;
    font-weight: 400;
}

.nav-xbootstrap li ul.dropdown li:last-child a { 
    border-bottom: none; 
}

.nav-xbootstrap li:hover a {
    background: #F0EAE0;
    color: #000 !important;
}

.nav-xbootstrap li:first-child:hover a { 
    border-radius: 3px 0 0 3px; 
}

.nav-xbootstrap li ul.dropdown li:hover a { 
    background: rgba(0,0,0, .1); 
}

.nav-xbootstrap li ul.dropdown li:first-child:hover a { 
    border-radius: 0; 
}

.nav-xbootstrap li:hover .arrow-down { 
    border-top: 5px solid #fff; 
}
.nav-xbootstrap span { 
    padding:0px 10px;   
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: '';
}


/* mobile version */
.navbar-default .navbar-toggle {
    color:#fff;
    border-color: #000;
    background-color:#CCC;
    float:right;
}
.navbar-default .navbar-toggle nav-xbootstrap li {
    color:#fff;
    border-color: #000;
    background-color:#CCC;
    float:left;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color:#CCC;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
.title-mobile {
  display: none;
}

 

[Clauido José 3]

value vou dar mais um estudo sobre bootstrap não programador frontend sou backend mais vou ter que aprender osso do oficio rs