Start by copying our navbar template:
- HTML version
- ERB version (an example with devise path helpers)
Of course, you have to replace the assets (logo, profile picture) by your own.
For our navbar styles to apply, you have to:
- add
class="navbar-wagon"to the initial Bootstrap<nav> - your logo should be a
<img>inside the.navbar-brandlink. - your profile picture should hold the class
class="img-avatar" - To apply a "button-style" to a link, add it a
class="btn"
Our _navbar.css.scss implements style rules on the .wagon-navbar class. Herebelow we detail the role of each sass variable.
Change your navbar background and link color, and link hover color
/* -------------------------------------
* Colors & Fonts
* ------------------------------------- */
$navbar-color: white;
$navbar-hover-color: #D4312D;
$navbar-font-family: "Montserrat", sans-serif; // Google fonts
$navbar-bg: transparent;Change the height, spacing and borders
/* -------------------------------------
* Box model
* ------------------------------------- */
$navbar-height: 50px;
$navbar-vertical-padding: 5px;
$navbar-horizontal-padding: 20px;
$navbar-border-bottom-width: 0;
$navbar-border-bottom-color: grey;We give you some variables for pimping your navbar buttons.
/* -------------------------------------
* Navbar button
* ------------------------------------- */
$navbar-btn-height: 40px;
$navbar-btn-bg: lightgrey;
$navbar-btn-color: white;
$navbar-btn-horizontal-padding: 10px;
$navbar-btn-radius: 2px;You can also change the style of your navbar profile picture playing on its radius and border
/* -------------------------------------
* Navbar profile picture
* ------------------------------------- */
$navbar-profile-radius: 50%;
$navbar-profile-border-color: white;
$navbar-profile-border-width: 2px;In Rails, the integration is easy if you have installed sass-rails and bootstrap-sass gems. You can just add the _navbar.scss file to your Rails layout stylesheets, and then import this file in application.css.scss
//stylesheets/layout/_navbar.css.scss
// Our navbar SCSS code//stylesheets/layout/_index.css.scss
@import "navbar";
@import "footer";
@import "sidebar";//stylesheets/application.css.scss
/* -------------------------------------
* Layout stylesheets
* ------------------------------------- */
@import "layout/index";
Here you go!
Don't forget to modify our ERB template carefully if you use different path helpers.
Feel free to contribute to this project with pull requests, and to share with us your navbar masterpieces!
- Twitter: https://twitter.com/lewagonparis
- Facebook: https://facebook.com/lewagonformation
- Website: http://lewagon.org
Peace
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent