# Navigation Menu ReFormat

**URL:** <https://forums.knack.com/t/navigation-menu-reformat/8325>\
**Category:** Show & Tell\
**Created:** [October 20, 2020, 9:18pm UTC](https://forums.knack.com/t/navigation-menu-reformat/8325 "2020-10-20T21:18:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ColorHubAd09220](https://avatars.discourse-cdn.com/v4/letter/c/7bcc69/32.png) [@ColorHubAd09220](https://forums.knack.com/u/ColorHubAd09220)\
**Post date:** [October 20, 2020, 9:18pm UTC](https://forums.knack.com/t/navigation-menu-reformat/8325/1 "2020-10-20T21:18:13Z")

</div>

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).&nbsp;

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

&nbsp;

/\* 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;  
}

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [October 26, 2020, 5:08am UTC](https://forums.knack.com/t/navigation-menu-reformat/8325/2 "2020-10-26T05:08:52Z")

</div>

Nice job 376004170091&nbsp;and thanks for sharing - looks great.

---

<div class="post-metadata">

**Author:** ![GaryStark10384](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@GaryStark10384](https://forums.knack.com/u/GaryStark10384)\
**Post date:** [January 16, 2023, 8:02pm UTC](https://forums.knack.com/t/navigation-menu-reformat/8325/3 "2023-01-16T20:02:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GaryStark10384](https://avatars.discourse-cdn.com/v4/letter/g/e95f7d/32.png) [@GaryStark10384](https://forums.knack.com/u/GaryStark10384)\
**Post date:** [January 16, 2023, 8:23pm UTC](https://forums.knack.com/t/navigation-menu-reformat/8325/4 "2023-01-16T20:23:18Z")

</div>

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

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