Navbar Background Image


Topic: Navbar Background Image

ogrodski asked 6 years ago

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


Damian Gemza staff answered 6 years ago

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


ogrodski answered 6 years ago

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


Damian Gemza staff answered 6 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags