Bootstrap navbar color

Bootstrap navbar color DEFAULT

Bootstrap 4 Navigation Bar

❮ PreviousNext ❯


Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page:


Basic Navbar

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with the class, followed by a responsive collapsing class: (stacks the navbar vertically on extra large, large, medium or small screens).

To add links inside the navbar, use a element with . Then add elements with a class followed by an element with a class:

Example

<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav>

Try it Yourself »

Vertical Navbar

Remove the class to create a vertical navigation bar:

Example

<!-- A vertical navbar -->
<nav class="navbar bg-light">

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>

</nav>

Try it Yourself »


Centered Navbar

Add the class to center the navigation bar.

The following example will center the navigation bar on medium, large and extra large screens. On small screens it will be displayed vertically and left-aligned (because of the .navbar-expand-sm class):

Example

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Try it Yourself »

Colored Navbar




Use any of the classes to change the background color of the navbar (, , , , , , and )

Tip: Add a white text color to all links in the navbar with the class, or use the class to add a black text color.

Example

<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Try it Yourself »

Active/disabled state: Add the class to an element to highlight the current link, or the class to indicate that the link is un-clickable.


Brand / Logo

The class is used to highlight the brand/logo/project name of your page:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Logo</a>
  ...
</nav>

Try it Yourself »

When using the class on images, Bootstrap 4 will automatically style the image to fit the navbar vertically.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
    <img src="bird.jpg" alt="Logo" style="width:40px;">
  </a>
  ...
</nav>

Try it Yourself »

Collapsing The Navigation Bar

Very often, especially on small screens, you want to hide the navigation links and replace them with a button that should reveal them when clicked on.

To create a collapsible navigation bar, use a button with . Then wrap the navbar content (links, etc) inside a div element with , followed by an id that matches the of the button: "thetarget".

Example

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

Try it Yourself »

Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.


Navbar With Dropdown

Navbars can also hold dropdown menus:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Dropdown link
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

Try it Yourself »

Navbar Forms and Buttons

Add a element with to group inputs and buttons side-by-side:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-success" type="submit">Search</button>
  </form>
</nav>

Try it Yourself »

You can also use other input classes, such as or to attach an icon or help text next to the input field. You will learn more about these classes in the Bootstrap Inputs chapter.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </form>
</nav>

Try it Yourself »

Navbar Text

Use the class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
  </ul>

  <!-- Navbar text-->
  <span class="navbar-text">
    Navbar text
  </span>

</nav>

Try it Yourself »

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.

A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

The class makes the navigation bar fixed at the top:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Try it Yourself »

Use the class to make the navbar stay at the bottom of the page:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Try it Yourself »

Use the class to make the navbar fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as ).

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Try it Yourself »

❮ PreviousNext ❯


Sours: https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

.my-navbar {

 

background-color:#004080;

 

border-color:#425766;

 

}

 

.my-navbar .navbar-brand {

 

color:#fff;

 

}

 

.my-navbar .navbar-brand:hover, .my-navbar .navbar-brand:focus {

 

color:#AAD5FF;

 

}

 

.my-navbar .navbar-text {

 

color:#d7e2e9;

 

}

 

.my-navbar .navbar-nav > li > a {

 

color:#fff;

 

}

 

.my-navbar .navbar-nav > li > a:hover, .my-navbar .navbar-nav > li > a:focus {

 

color:#fff;

 

background-color:#B05800;

 

}

 

.my-navbar .navbar-nav > li > .dropdown-menu {

 

background-color:#2894FF;

 

}

 

.my-navbar .navbar-nav > li > .dropdown-menu > li > a {

 

color:#d7e2e9;

 

}

 

.my-navbar .navbar-nav > li > .dropdown-menu > li > a:hover,

 

.my-navbar .navbar-nav > li > .dropdown-menu > li > a:focus {

 

color:#fff;

 

background-color:#004182;

 

}

 

.my-navbar .navbar-nav > li > .dropdown-menu > li > .divider {

 

background-color:#69899f;

 

}

 

.my-navbar .navbar-nav > .active > a, .my-navbar .navbar-nav > .active > a:hover, .my-navbar .navbar-nav > .active > a:focus {

 

color:#e5dbdb;

 

background-color:#B05800;

 

}

 

.my-navbar .navbar-nav > .open > a, .my-navbar .navbar-nav > .open > a:hover, .my-navbar .navbar-nav > .open > a:focus {

 

color:#e5dbdb;

 

background-color:#425766;

 

}

 

.my-navbar .navbar-toggle {

 

border-color:#425766;

 

}

 

.my-navbar .navbar-toggle:hover, .my-navbar .navbar-toggle:focus {

 

background-color:#425766;

 

}

 

.my-navbar .navbar-toggle .icon-bar {

 

background-color:#d7e2e9;

 

}

 

.my-navbar .navbar-collapse,

 

.my-navbar .navbar-form {

 

border-color:#d7e2e9;

 

}

 

.my-navbar .navbar-link {

 

color:#d7e2e9;

 

}

 

.my-navbar .navbar-link:hover {

 

color:#e5dbdb;

 

}

 

 

@media (max-width: 767px) {

 

  .my-navbar .navbar-nav .open .dropdown-menu > li > a {

 

color:#d7e2e9;

 

}

 

  .my-navbar .navbar-nav .open .dropdown-menu > li > a:hover, .my-navbar .navbar-nav .open .dropdown-menu > li > a:focus {

 

color:#e5dbdb;

 

}

 

  .my-navbar .navbar-nav .open .dropdown-menu > .active > a, .my-navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .my-navbar .navbar-nav .open .dropdown-menu > .active > a:focus {

 

color:#e5dbdb;

 

background-color:#425766;

 

}

 

}

Sours: https://www.jquery-az.com/how-to-change-bootstrap-navbar-color-and-other-default-properties/
  1. Hotels grand falls
  2. Used bixpy jet
  3. Wvu medicine physicians
  4. Motor bike rims

How to change navigation bar color in Bootstrap ?

The navigation bar color can be changed in Bootstrap using 2 methods:
Method 1: Using the inbuilt color classes
Changing the text color
The text color of the navigation bar can be changed using two inbuilt classes: 
 

  • navbar-light: This class will set the color of the text to dark. This is used when using a light background color.
  • navbar-dark: This class will set the color of the text to light. This is used when using a dark background color.

Changing the background color:
Bootstrap 4 has a few inbuilt classes for the colors of any background. These can be used to set the color of the background of the navigation bar. The various background classes available are:
 

  • .bg-primary: This sets the color to the primary color.
  • .bg-secondary: This sets the color to the secondary color.
  • .bg-success: This sets the color to the success color.
  • .bg-danger: This sets the color to the danger color.
  • .bg-warning: This sets the color to the warning color.
  • .bg-info: This sets the color to the info color.
  • .bg-light: This sets the color to the light color.
  • .bg-dark: This sets the color to the dark color.
  • .bg-white: This sets the color to the white color.
  • .bg-transparent: This sets the navbar to be transparent.

Example: 
 

html

 

Output: 
 

inbuilt-class



Method 2: Creating a custom class for the navigation bar
A custom class can be created to specify the background color and the text color of the navbar. This class is styled using CSS according to the required values. The names of the classes are kept in a manner to override the inbuilt navigation bar classes.
The background color is set by directly specifying the background-color property with the color needed. 
 

html

The navbar text and the brand text color can be set using the .navbar-text and .navbar-brand classes. These are the inbuilt navigation bar classes that are be overridden by using the same class name. The text color is specified using the color property.
 

html

Example: 
 

html

 
 
 
 

Output: 
 

custom-class

 




My Personal Notesarrow_drop_up
Sours: https://www.geeksforgeeks.org/how-to-change-navigation-bar-color-in-bootstrap/
How to Create Sticky Navbar with Hover Menu - Navbar Color Change - Responsive Navbar in Bootstrap 4

How to change navbar color in Bootstrap with css

This post talks about multiple ways to solve below items in Bootstrap 4.

  • How to change color of an text color in navbar bootstrap
  • Change background color navigation bar

navbar in bootstrap can be created as follows

Default background color is white and color is blue. In bootstrap, Changing the color of navigation is not that easy, as it contains brand, anchor links inside it.

Bootstrap classes are LESS based styles, which you need to know the parent and child classes used inside navigation bar

Navigation bar text color change

By default navigation bar is transparent, that means text color is sync with background color

Bootstrap provides two inbuilt selectors for text colors.

  • navbar-light This is used to change text color to dark from light and background colors are light only.
  • navbar-dark It changes text color from light to dark and background color is dark.

Background color change

Bootstrap 4.5 provides following inbuilt classnames we can use in navigation bar

  • bg-primary - primary color
  • bg-secondary - change background color to secondary
  • bg-success - change background to success color
  • bg-danger - updates background to danger color
  • bg-warning - warning color is updated in background
  • bg-info - information color is updated in background
  • bg-light- light color
  • bg-dark - dark color
  • bg-white - background color is white

So we can use following approaches to change colors for navigation

  • custom css class
  • style attribute
  • Inbuilt selectors

Here is an example using navbar-light/dark and bg-light/dark

Output: navbar color change boostrapInbuilt selectors

We can override the inbuilt selectors in CSS for color, However this will effects in other places where this classnames are being used. It is not recommended to use override classnames

custom css class

This is another way existing css selectors are not touched, It is clean way of changing color. Create a CSS class navbar-customclass or your name

Codepen example

This example is the code for creating custom class for navigation bar

style attribute This is not recommeded approach as it only applies to inline elements fo navigation bar, You have apply in each child element of an navbar.

So we have to change entire brand,nav links colors, This is not recommended approach

Conclusion

Sours: https://www.cloudhadoop.com/bootstrap-navbar-color/

Navbar color bootstrap

.

Bootstrap 4 Navbar Color Change On Hover

.

Now discussing:

.



568 569 570 571 572