Header Layout: Center Logo with Boxed Navigation

What does this code do?

This code snippet will allow you to have the navigation go 100% of the way across the screen with a boxed navigation design and a centered logo.

Video Tutorial

Set Up the Header

First things first, you need to set up the header. Add all the elements you want to the header and choose the following header layout.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Header Navigation Styles */
.header-nav {
  position: absolute;
  width: 100vw;
  top: 40px; // move nav bar up or down 
  background: white; //background color of nav bar
}
.header-nav-list {
  display: flex;
}
.header-nav-item {
  flex: 1 1 0;
  margin: 0 !important;
  border: 1px dotted #38383B; // border around navigation items 
}

// remove underline from header links
header a {
  text-decoration: none !important;
  background-image: none !important;
}

//hover styles
.header-nav-item:hover {
  border: 1px dotted black; // border around navigation items on hover
}
.header-nav-item:hover *{
  color: black !important; // color of text on hover
}

//folder styles
.header-nav-folder-content {
  width: 95%;
  display: flex;
  flex-direction: column;
  border: 1px dotted black; // border around dropdown folder
}
.header-nav-item, .header-nav-folder-item {
  flex: 1;
  margin: 0 !important;
}

Then edit the style of the border and the colors.

How To Use It

1. Copy and paste the code as indicated above.

2. Style the border and colors.