# 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. 

{% hint style="warning" %}
**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.
{% endhint %}

## 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.

```scss
// 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".

```scss
// 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.

```scss
// 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

```scss
// 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"

```scss
$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.

```scss
// 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 {

    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.nickarce.com/bricks-mega-menu/docs/bricks-mega-menu-template/getting-started/navigation-items.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.