Menu
I have searched through the sass files of Bootstrap 4 and the $navbar-height is missing. What is the sass variable to change navbar height in Bootstrap 4?
311
How to change Bootstrap navbar height 1 1. Using utility classes - quick and easy way Bootstrap 4 comes with an excellent set of utility classes, mostly built for quickly setting spacing, color, or background directly in ... 2 2. ... 3 3. ... 4 5. ...
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).
To slightly increase navbar height: add py-3 class to it To increase its height a bit more: add py-5 class to your navbar To decrease navbar height: add py-0 class to your navbar Tip: you can combine more classes for individual viewports: e.g., py-3 py-lg-5 classes will make your navbar narrower on mobile devices and larger on laptops and desktops
The .navbar-brand class is used to highlight the brand/logo/project name of your page: ... When using the .navbar-brand class on images, Bootstrap 4 will automatically style the image to fit the navbar vertically.
I needed a sidebar with 100vh, but I was getting a vertical scrollbar because of the extra height from the navbar. This is what worked for me and the result looks perfect.
calc(100vh - #{$nav-link-height} - #{$nav-link-padding-y * 2})
From this I conclude that the sidebar's height is
$nav-link-height + $nav-link-padding-y * 2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With