Tutorial

Customizing with CSS

Change the navigation using CSS

You can customize all the visual aspects of the navigation bar as colors and dimensions simply by modifying the CSS rules. Below are some examples of how to modify some of these aspects.

Create a CSS (navigation-custom.css) file and add to your page after the main file:

Copy

<link href="css/navigation.css" rel="stylesheet">
<link href="css/navigation-custom.css" rel="stylesheet">

Take the main file (navigation.css) as a reference and rewrite the styles by placing your modifications into the custom file. Here's how to modify some navigation colors. Replace with the colors you want:

Navigation background

Copy

.navigation {
    background-color: #ffffff;
}
.navigation-body {
    background-color: #ffffff;
}

Navigation link color

Copy

.navigation-link,
.navigation-link:visited {
    color: #555d65;
}

/* hover, focus and active state */
.navigation-item:not(.navigation-brand-text):hover .navigation-link,
.navigation-item:not(.navigation-brand-text):focus .navigation-link,
.navigation-item:not(.navigation-brand-text).is-active .navigation-link {
    color: #7367F0;
    background-color: transparent;
}

Navigation button

Copy

.navigation-btn {
    border: solid 1px #7367F0;
    background-color: #7367F0;
}

/* hover and focus state */
.navigation-btn:hover, 
.navigation-btn:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #6254ee;
}

Here's how to modify the navigation height:

Navigation height (mobile view)

Copy

.navigation {
    min-height: 60px;
}

Navigation height (landscape view)

Copy

@media (min-width: 992px) {
    .navigation-link {
        padding: 10px 16px;
    }
}

Investigate the main file to see which rules should be modified. See the list of tutorials for other ways to modify the navigation bar and add features.