Navigation Menu ReFormat

API & Customization Show & Tell
1

I figured out a way to make the navigation bar look cleaner/more minimal. We were looking for a way to match our external website, as well as increase usable screen real estate. Below is a screenshot as well as the code (fairly novice at CSS so there may be a better way). 

![](upload://tdIBp2OG05SmIi3FMlswcz4ukPk.png)

 

/* Format Navigation Bar */
#knack-body #kn-app-header {
background-color: #ffffff;
}

.kn-info-bar {
background-color: #ffffff;
border-top-color: #cccccc;
border-top-width: 1px;
border-top-style: solid;
padding-bottom: 5px;
}

.kn-navigation-bar a {
background-color: #ffffff;
padding-left: 30px !important;
color: black !important;
font-size: 14px !important;
}

.kn-navigation-bar a:hover {
background-color: #ffffff;
color: #a6a6a6 !important;
}

#kn-app-menu nav.tabs li.is-active a {
color: LightSeaGreen !important;
}

.kn-content .tabs a {
align-items: left;
border-bottom: 1px solid #dbdbdb;
color: #4a4a4a;
display: flex;
justify-content: left;
padding-right: 30px !important;
padding-bottom: 10px !important;
vertical-align: top;
text-decoration: none;
}

.kn-crumbtrail {
display: flex;
align-items: center;
flex-grow: 1;
padding-top: 5px;
}

header .kn-container{
align-items: center;
display:flex;
justify-content: left;
}

1 Like
2

Nice job 376004170091 and thanks for sharing - looks great.

3

This is really great! The hamburger menu isn’t showing when on mobile for me…do you know what should be changed?

4

I figured it out. I changed the top to:
#knack-body {
background-color: #ffffff;
}

#kn-app-header {
color: #0290c7 !important;
}