logo
down
shadow

Centering navbar-brand image with centered navbar


Centering navbar-brand image with centered navbar

By : shaojinli
Date : November 18 2020, 03:49 PM
this one helps. I'm just learning Bootstrap 3 and I want to use that in my website so it's still comfortable to access from mobile devices. , Just add this to your css
code :
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    max-width: 480px; /**change the max width to what ever you want you can add it in media query too*/
    margin: 0 auto;  /**center the menu*/
}


Share : facebook icon twitter icon
Centering the image in navbar-header / navbar-brand

Centering the image in navbar-header / navbar-brand


By : Azone
Date : March 29 2020, 07:55 AM
Any of those help Like this
demo
code :
.navbar-brand{
    border:1px solid red;
    text-align:center;
}
Hide bootstrap navbar brand and only display centered when navbar is collapsed

Hide bootstrap navbar brand and only display centered when navbar is collapsed


By : Mike Spangler
Date : March 29 2020, 07:55 AM
around this issue This is fairly easy to do using some of the bootstrap utility classes. By default, the navbar collapses at XS (<768px).
To have something appear only when you get to XS just add the visible utility class for that size.
code :
<div class="visible-xs"></div>
<div class="hidden-xs"></div>
Bootstrap navbar-brand centering within navbar

Bootstrap navbar-brand centering within navbar


By : tomair
Date : March 29 2020, 07:55 AM
seems to work fine The main issue is that .navbar-brand is a floating element. If you check the styles, it has a float:left, so it will position itself at the left of its parent by default. You can fix that by removing the floating property:
code :
.navbar-brand {
    float:none;
}
.navbar-header {
    text-align:center;
    line-height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style>
.navbar-header {
    text-align:center;
    line-height:50px;
}

.navbar-brand {
    float:none;
}
</style>


<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
        <img alt="Brand" src="http://lorempixel.com/200/30/abstract" height="30px" /></a>
    </div>
</nav>
Centering Brand image in navbar

Centering Brand image in navbar


By : realn
Date : March 29 2020, 07:55 AM
Hope that helps https://jsfiddle.net/up6kcu5q/1/
Using position: absolute would work in this case
code :
@media (max-width: 767px) {
  .container > .navbar-header.visible-xs-block {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
Can't change navbar-brand image position to be in vertically centered in navbar

Can't change navbar-brand image position to be in vertically centered in navbar


By : Kangkang Yan
Date : March 29 2020, 07:55 AM
hope this fix your issue Bydefault bootstrap navbar come with some padding/height, just update your CSS with zero padding and required height to set this
Related Posts Related Posts :
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • Javascript - Get value from textbox and save it on a string
  • Backbonejs collection not populated, but fetch works
  • when function's internal [[scope]] property is assigned?
  • Wrapping around the edges in a 2d array (game of life)?
  • Clone div with all nested elements along with events in pure javascript
  • How to get response text?
  • Setting and retrieving cookies in javascript
  • Passing parameter with double quotes
  • finding the meaning of the obfuscated javascript
  • Socket.io - Sending data from a pusher stream to the client
  • How to determine the visibility li's in a scrollable ul
  • How to create Scrolling Effect like Grouek website
  • How to display a state in parents template in ui-router
  • Angular ng-repeat - creating collection dynamically
  • finding advertisements on a page with javascript
  • Is there a way to cause a Grunt plugin to fail if input files are missing?
  • JQuery datepickers- setting end date from a start date
  • javascript - explanation request of a behaviour
  • Converting String into date format in JS
  • Choose element Angular
  • Display background grid by using image with CSS
  • Call function from another Controller in another file AngularJS
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org