Navigation Items

Adding More Nav Links Or Dropdowns

---

Because the CSS is targeting specific classes we want to make sure we duplicate what is already in the header template if we need more of an item.

Do not add a nav link or dropdown from the bricks "add element" panel as this wont bring over classes. Duplicate navigation items that already exist if you need more.

Link Styles (Desktop)

---

To style the top level link styles we can edit the @mixin link-style to our desired settings. Included in mixin is an area for the active page styling.

// WHAT STYLES DO YOU WANT YOUR NAV LINKS? https://nickarce.com/link-styles/ ******
@mixin link-style {
    color: black;

    //hover styling
    &:hover {
        color: grey;
    }

    //active page style
    &[aria-current="page"], &.aria-current {
        
    }
}

Sticky Header Link Styles (Desktop)

---

On/Off

If you are using a sticky header you can turn on alternate styling for links when you are scrolling the page by turning the $sticky-header-links to "true".

$sticky-header-links: false; // SELECTION (true/false)

Styling

When you have $sticky-header-links set to "true" you can now update the styling of the links within your header on desktop. These are set by default to crazy colors to allow you to see the change.

// WHAT STYLES DO YOU WANT THE LINKS ON A STICKY HEADER? ******
@mixin sticky-link-style {
    color: red;
    
    //hover styling
    &:hover {
        color: blue;
    }

    //active page style
    &[aria-current="page"], &.aria-current {
        background-color: magenta;
    }
}

Last Link Item As Button (Desktop)

---

On/Off

By default the last item in your navigation will appear as a button. This can be turned off by changing the $last-nav-button-desktop to "false"

$last-nav-button-desktop: true; // SELECTION (true/false) *********

Styling

You can alter the styling of the last nav item by changing the @mixin last-link-btn-style to your desired settings. For ACSS users this will include the .btn--primary styles by default.

// STYLE LAST NAV BUTTON HERE ********
@mixin last-link-btn-style {
    // style button here
    padding: 0.8em 1.2em;
    background-color: black;
    color: white;

    //hover styling
    &:hover {

    }
}