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 and the @mixin-link-hover-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: var(--neutral);

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

    }
}

//WHAT STYLES DO YOU WANT YOUR NAV LINKS ON HOVER AND YOUR DROPDOWNS WHEN THEY ARE OPEN? *****
@mixin link-hover-style {
    color: var(--neutral-light);

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

    }
}

Sticky Header Link Styles (Desktop)

---

Turning Sticky Styles On/Off

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

// DO YOU WANT DIFFERENT STYLES FOR LINKS AND HAMBURGER ICON FOR A STICKY HEADER? https://nickarce.com/sticky-link-style/ ******
$sticky-header-styles: false; // SELECTION (true/false)

Styling Sticky Links

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;
    }
}

Styling Sticky Mobile Hamburger Icon

You can update the below variables in the SCSS sheet to change the color of your hamburger icon while the header is in a sticky position

// SET STICKY HAMBURGER COLOR MUST HAVE $sticky-header-styles set to true for it to work ******
$hamburger-sticky-color-choice: red;

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 {

    }
}