Skip to content

Instantly share code, notes, and snippets.

@A-Kiwams

A-Kiwams/nav.component.css

Created March 3, 2019 08:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save A-Kiwams/af5da3eeffde718e4fe324538cd9ef6c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save A-Kiwams/af5da3eeffde718e4fe324538cd9ef6c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. A-Kiwams created this gist Mar 3, 2019.
    17 changes: 17 additions & 0 deletions nav.component.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    .navbar-custom {
    background-color: #ff5500;
    }
    /* change the brand and text color */
    .navbar-custom .navbar-brand,
    .navbar-custom .navbar-text {
    color: #ffffff;
    }
    /* change the link color */
    .navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
    }
    /* change the color of active or hovered links */
    .navbar-custom .nav-item.active .nav-link,
    .navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    }
    25 changes: 25 additions & 0 deletions nav.component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <nav class="navbar navbar-expand-sm navbar-custom">
    <a href="/" class="navbar-brand">NewbieEstates</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCustom">
    <i class="fa fa-bars fa-lg py-1 text-white"></i>
    </button>
    <div class="navbar-collapse collapse" id="navbarCustom">
    <ul class="navbar-nav">
    <li class="nav-item active">
    <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Offers</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Housing</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Payments</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
    </li>