Topic: Navbar height problem
When I put image into navbar, it is normal height. When I put just text into it, there is problem with height of this element (is narrower). Is it a bug inside MDB?
https://mdbootstrap.com/snippets/standard/pawled/2795395
It happens whens hamburger navbar is enabled. When navbar is collapsed, everything is alright.
Marcin Luczak staff commented 4 months ago
In your example navbar is getting narrower when hamburger is visible to take less screen space on mobile devices. If you want to prevent that shrinking you can explicitly add to a hamburger the same line-height as other nav items have. Please see the CSS tab in my snippet: https://mdbootstrap.com/snippets/standard/marcin-luczak/2801310
Regards, Marcin
If I add some text after img, it works normally (without shrinking). Is it really related with hamburger line-height?
<a class="navbar-brand" href="#">
<img
src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"
height="30"
alt=""
loading="lazy"
/>text
</a>
Marcin Luczak staff commented 3 months ago
Yes, since hamburger is intended to be visible only on mobile/smaller devices its line-height is explicitly set to 1, instead of 1.6 as other text elements have, so it can take less space.
Regards, Marcin
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB 5
- MDB Version: 2.2.1
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No
Marcin Luczak staff commented 4 months ago
Hi,
The default height of the icon image inside the Navbar component is 30px and the height of the Navbar when no image is present is adjusted to its content, thus it can be different than the height with the image. If the problem is with something else, please provide the snippet with your code showing the issue.
Regards, Marcin