html - Bootstrap - Unable to center collapsed items with NavBar pulled right -


question background:

i have standard bootstrap collapsible navbar pulled-right.

the issue:

this navbar on non-mobile device:

enter image description here

this pulled right allow desired right-aligned posistion.

this navbar collpased on mobile device:

enter image description here

**note item in dropdown aligned right, make sense pulled right want them centered when on mobile device, whilst keeping them aligned right on non-mobile device

the code:

i thought setting text-center on <ul> list solve issue not:

        <div class="navbar">         <nav class="navbar navbar-default navbarcolour" role="navigation" id="nav">             <div class="container">                 <div class="navbar-header">                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">                         <span class="sr-only">toggle navigation</span>                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>                     </button>                     <img src="~/images/dc.png" class="dc">                 </div>                 <div class="middlenavpadding">                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                         <div class="pull-right text-center">                             ********set text-center dosen't work********                                                              <ul class="nav navbar-nav text-center">                                 <li><a href="#" class="scroll-link" data-id="info">services</a></li>                                 <li><a href="#" class="scroll-link" data-id="mission">our mission</a></li>                                 <li><a href="#" class="scroll-link" data-id="gallery">projects gallery</a></li>                                 <li><a href="#" class="scroll-link" data-id="contact">contact us</a></li>                             </ul>                         </div>                     </div>                 </div>             </div>         </nav>     </div>

any setting these <ul> list elements centered keep menu items pulled right on non mobile device great.

instead of using pull-right should use navbar-right.

just put navbar-right unordered-list, remove pull-right div, , links centered on small devices.

working example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>  <div class="navbar">      <nav class="navbar navbar-default navbarcolour" role="navigation" id="nav">          <div class="container">              <div class="navbar-header">                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span>   <span class="icon-bar"></span>   <span class="icon-bar"></span>   <span class="icon-bar"></span>                    </button>                  <img src="~/images/dc.png" class="dc">              </div>              <div class="middlenavpadding">                  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                          <ul class="nav navbar-nav navbar-right text-center">                              <li><a href="#" class="scroll-link" data-id="info">services</a>                              </li>                              <li><a href="#" class="scroll-link" data-id="mission">our mission</a>                              </li>                              <li><a href="#" class="scroll-link" data-id="gallery">projects gallery</a>                              </li>                              <li><a href="#" class="scroll-link" data-id="contact">contact us</a>                              </li>                          </ul>                  </div>              </div>          </div>      </nav>  </div>


Comments

Post a Comment

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

im trying write component admin side , need add user creation. dont want duplicate existing codes add link. know how add task not simple link toolbar. thx help. if wanting button opens new user screen can try in component: $bar = jtoolbar::getinstance('toolbar'); $bar->appendbutton('link', 'users', 'new user','index.php?option=com_users&task=user.add'); you need add view.html.php file wherever you're creating toolbar. is need?
Read more

linux - disk space limitation when creating war file -

i have 1 gb disk space limitation hosting app , have used 700mb of it. however want create war file directory big (around 600mb) using command : jar -cvf root.war folderpath that's why encounter quota limitation , can't following. i'm looking way delete folder content when it's applying archive conserve disk space take note can't install zip tool in ssh shell ~ the code works on test directories, test first anyway, deletes files. it's not efficient. assumptions: 300mb free space, in destructively compress 600mb folderpath directory. none of files big -- if file in folderpath 300mb or larger, fail. notes: if ' $out ' file exists, nothing. first find pipes file list while , if ' $out ' doesn't exist in loop, create it, don't update -- if does exist, update it. each pass adds 1 more file, deletes unless file directory. after loop finishes delete empty directories too. unset u ; in=folderpath ; out=roo...
Read more