previously, wide logo's would overflow the width of the Navbar.Brand. this commit adds height to the brand element, instead of the logo image, containing the logo height and width within the Navbar.Brand.
there isn't a bootstrap element that sets height to a specific value. the choice was to use inline styles or create a new class. I opted to create a new class. it's specific to the Header component so it's not in globals.scss. the name "custom-navbar-brand" makes it easier to denote that it's our class and not bootstrap's when inspecting from the browser.
story
contain the logo in the navbar
previously, wide logo's would overflow the width of the Navbar.Brand. this commit adds height to the brand element, instead of the logo image, containing the logo height and width within the Navbar.Brand.
there isn't a bootstrap element that sets height to a specific value. the choice was to use inline styles or create a new class. I opted to create a new class. it's specific to the Header component so it's not in globals.scss. the name "custom-navbar-brand" makes it easier to denote that it's our class and not bootstrap's when inspecting from the browser.
demo
example with tall logo
example with wide logo