Navbar Background Image

Topic: Navbar Background Image

ogrodski free asked 5 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,

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

ogrodski free answered 5 years ago

0 0 Best answer

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:

<pre class="prettyprint"><code>.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;
 }
}
</code></pre>

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

Please insert min. 20 characters.

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,

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

ogrodski

65Support score
3Questions 5Answers 0Snippets