Header Navigations

Description

Header Navigations are a set of links that direct visitors to different pages of your site.

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.header-nav {
}

</style>

Custom CSS

7.1

To target the entire header

/* entire header */
.header {
}

To target all navigation

/* all navigation */
.header-nav-list {
}

To target the navigation button

/* navigation button */
.header-actions .btn {
}

To target social navigation links

/* social navigation links */
.header-actions-action .header-actions-action--social {
}

To target the header shopping cart

/* header shopping cart */
.header-actions-action--cart {
}

7.1 Mobile

To target the mobile navigation page list

/* mobile navigation page list */
.header--menu-open .header-menu .header-menu-nav-list a {
}

To target the mobile menu open

/* mobile menu open */
.header--menu-open .header-menu {
}

To target the mobile menu close

/* mobile menu close */
.header--menu-open .burger-inner {
}

To target the mobile menu icon

/* mobile menu icon */
.header--menu-open .burger-inner {
}

/* mobile menu icon - top line */
.burger-inner .top-bun {
}

/* mobile menu icon - middle */
.burger-inner .bottom-bun {
}

/* mobile menu icon - bottom */
.burger-inner .patty {
}

7.0

To target the entire header

/* entire header */
.header {
}

To target all navigation

/* all navigation */
.header-nav {
}

To target the primary navigation

/* primary navigation */
.Header-nav--primary {
}

To target the secondary navigation

/* secondary navigation */
.Header-nav--secondary {
}

To target the header shopping cart

/* header shopping cart */
.Cart {
}

7.0 Mobile

To target the mobile menu

/* mobile menu */
.Mobile-overlay-menu {
}

To target mobile navigation page list

/* mobile navigation page list */
.Mobile-overlay-nav Mobile-overlay-nav--primary { 
}

To target mobile secondary navigation page list

/* mobile secondary navigation page list */
.Mobile-overlay-nav Mobile-overlay-nav--secondary {
}

To target the mobile menu close

/* mobile menu close */
.Mobile-overlay-close .Icon--close {
}

To target the mobile menu button

/* mobile menu button */
.Mobile-bar-menu {
}
7.0, 7.1Cristina TiosecoHeader