Bootstrap 4 Navbar

[JStahn]

Wondering if there is a way to add a background image or texture to the NavBar with bootstrap? Something to make it pop more than just adding a color. Couldn’t find anything on this and most likely didn’t coin the search terms right but any suggestions are appreciated. 

[ishan_shah]

Hello @JStahn,there is no default class which will provide you to set image in background ,you can use bootstrap 4 class to create good looking navbar after that you can use custom css to override that particular class and apply background-img tag for your desire background image like this:

HTML:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact Us </a></li>
      <li><a href="#">About us</a></li>
    </ul>
  </div>
</nav>

css:

.navbar .navbar-default{

 background-image: url("Your Image path");

}