Change padding-top and padding-bottom and define line-height for uncollapsed navbar links. This needs to be calculated, but it should be easy to do. When we make it responsive, it will scale down 'nicely' in size as media breakpoints are encountered.Ĭhange margin-top for the.navbar-toggle button that appears in the collapsed navbar. What is the recommended way to style an image such that it is responsive and scales within the size of the navbar? First make the image to the largest size you will need. Changing the navbar width By default, you navigation bar items will be contained to the grid width that you have specified under Customize > Grid.

You can adjust this width to be responsive by using the Responsive icon to set a custom value for each device width. To change the size of the logo, look for the 'Width' option in the Logo upload area. Substitute the above CSS with whatever you desire to do to the NavBar. Paste the following into the *CSS* editor. Click Code Editor to open Code Editor DO NOT click on the HTML window thing.

Of course if it is displayed in less pixels it loses resolution, but if you load a big logo and then you resize it via css the effect is going to be the same and your page will take more time to load.Ĭlick Navbar to select it.

The best option is resizing the logo in Photoshop (or similar).

Bootstrap navbar open on resize