javascript - Increase bootstrap collapsed menu height ( when opened) -

-

i have created basic site bootstrap. using bootstrap navbar, collapsed option smaller devices.

i want increased height of ".collapsed navbar-collapsed" takes more space in page.

i gladly show image illistrate problem better im not allowed post images on here yet.

so pretty when view navigation bar on mobile device, looks great when collapsed menu closed. when click on 3 lined image open menu, shows 1 , half navigation page buttons. there way increase height can see 5 pages have there, if opened menu goes on jumbotron division below it?

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="index.html" style="font-size:      30px;">mark wuerch</a>     </div>     <div class="collapse navbar-collapse" id="mynavbar">       <ul class="nav navbar-nav">         <li class="active"><a href="index.html">home</a></li>         <li><a href="aboutme.html">about me</a></li>         <li><a href="philo.html">philosophy</a></li>         <li><a href="cv.html">my cv</a></li>         <li class="dropdown">           <a class="dropdown-toggle" data-toggle="dropdown" href="#">my projects           <span class="caret"></span></a>           <ul class="dropdown-menu">             <li><a href="#">school project on disabled learners</a></li>             <li><a href="#">building better school 1 book @ time</a></li>             <li><a href="#">working esl students</a></li>           </ul>       </ul>     </div>   </div> </nav>

see aboutme / home part. how make entire area larger when click on expand button can see 5 pages have.

see me / home part. how make entire area larger when click on expand button can see 5 pages have.

the default bootstrap css .navbar has height of 50px need override in order increase navbar

.navbar {min-height:80px !important}

to increase inner elements said, have use media queries: 

@media (max-width: 767px) {     .navbar-nav > li > {         line-height: 90px;/*changing particular line lot, increase , decrease done */         padding-top: 10px;         padding-bottom: 10px;         height: auto !important;         overflow: visible !important;     } }

bootply link

since need specific screen-size, can use this: 

.navbar-xs { min-height:58px; height: 58px; }

you should take @ this, found more answers: decrease size of navbar


Comments

Post a Comment

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

-
i'm running nodejs 0.12.3 - gulp 3.10.8 , gulp-nodemon 2.0.3. gulpfile.js : gulp.task('serve', ['build'], function() { gulp.start('fb-flo'); nodemon({ script: paths.server, env: { 'node_env': 'development' }, // env: { 'node_env': 'production' }, execmap: { 'js': 'node_modules/babel/bin/babel-node --stage 1' //es7 cote server }, delay: '0ms', watch: ['src/shared/', 'src/server/'], ignore: ['src/shared/components'], tasks: function (changedfiles) { var tasks = []; changedfiles.foreach(function (file) { if (path.extname(file) === '.jsx' && !~tasks.indexof('bundlejs')) tasks.push('bundlejs'); if (path.extname(file) === '.less' && !~tasks.indexof('compileless')) tasks.push('compileless'); }); return tasks; } ...
Read more

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

-
i trying make simple python program opening list of webpages user manually download reports site. don't have previous experience preparing exe files.. , i'm in learning process python coding. of done on windows 7 x64 this python code: #!c:/python34/python.exe -u splinter import * import time import os import csv #---------------------------------- raporty = [] open('../raporty.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') raporty.append(r) #--not implemented yet zmienne = [] open('../zmienne.csv', newline='') csvfile: contents = csv.reader(csvfile, delimiter=' ', quotechar='|') row in contents: r = ', '.join(row) r = r.replace(',','') zmienne.append(r) print("start") browser = browser(...
Read more

javascript - oscilloscope of speaker input stops rendering after a few seconds -

-
the following script reads audio user's microphone , renders oscilloscope on html canvas. the source taken example of mozilla developer network: visualizations web audio api and here fiddle: http://jsfiddle.net/b7j8pktp/ mozgetusermedia (note: code has no fork mechanism different browsers: works firefox) it works fine few seconds , stops rendering. whereas works totally stable: http://mdn.github.io/voice-change-o-matic/ the problem can reduced following code. microphone activation icon (next the address bar in firefox) disappears after 5 seconds: navigator.mozgetusermedia({audio: true}, function() {}, function() {} ); ( http://jsfiddle.net/b7j8pktp/2/ ) this known bug in firefox. take stream getusermedia call , hook window so: navigator.mozgetusermedia({audio: true}, function(stream) { window.stream = stream; // rest of code }, function err() { // handle error }); hopefully can fixed soon. problem we're f...
Read more