Topic: Navbar Background Image
Is it possible to use a 1px wide image as the background for the navbar? The image contains a custom color with a gradient.
I thought this would work but it doesn't seam to work:
Here is the scss:
mdb-navbar {
background-image: url('https://localhost:4200/head_background-79.jpg');
background-repeat: repeat-x;
}
I am using one of the sample navbars except I removed the "primary-color" class from nav:
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Thanks,
Al
Dear Al,
Please add some class to the mdb-navbar element, and in styles.scss file adds the below styles:
.bgcolor {
background-image: url('your-image-location') !important;2
background-repeat: repeat;
}
And the navbar will get the background image from your image. Best Regards,
Damian
Okay, I can get the desired background image to work properly now. I had to change repeat to repeat-x so that the image didn't also repeat vertically. Then, I had to assign a background color to the navbar so that the expanded menu would have a background color. I also had to add top padding to the navbar-collapse (which is only applied if max-width is 991.98) so that the menu items would display lower because my navbar is a little taller than normal.
Here is my styles.scss file:
.bgcolor {
background-image: url('https://localhost:44391/head_background-66.jpg') !important;
background-repeat: repeat-x;
}
@media (max-width: 991.98px) {
.navbar-collapse {
padding-top: 20px;
}
}
Everything works fine except the padding is also displayed under the navbar with the background color while resizing the window. It just looks glitchy. Is there anyway to eliminate the padding that displays during resizing?
Thanks,
Al
Dear Al,
Please try to add py-0 or px-0 or p-0 classes to the part of your navbar which has unwanted padding, and it should work.
If you need some responsive padding classes, please take a look at here: Spacing Utilities.
If something is unclear, feel free to ask.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: Laptop
- Browser: Chrome
- OS: Windows 7
- Provided sample code: No
- Provided link: No