# Navigation Menu

**URL:** <https://community.hubspot.com/t/navigation-menu/99233>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [February 1, 2024, 5:45pm UTC](https://community.hubspot.com/t/navigation-menu/99233 "2024-02-01T17:45:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![LMiginiac](https://avatars.discourse-cdn.com/v4/letter/l/f0a364/32.png) [@LMiginiac](https://community.hubspot.com/u/LMiginiac)\
**Post date:** [February 1, 2024, 5:45pm UTC](https://community.hubspot.com/t/navigation-menu/99233/1 "2024-02-01T17:45:18Z")

</div>

Hello amazing community,

I have a small issue with my navigation menu. We had a developer work on it and since then I can’t add any item without messing up the design.

Here’s a quick [loom video](https://www.loom.com/share/b2aed7514de74ab4bd2900d2944e3c8f?sid=4b0e65e2-f3b9-4fb0-9574-923759d27711) to better understand my issue.

Is there anything I can do to fix this?

Thanks a lot for your help!

LJ

---

<div class="post-metadata">

**Author:** ![evaldas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/evaldas/32/69160_2.png) [@evaldas](https://community.hubspot.com/u/evaldas)\
**Post date:** [February 2, 2024, 12:24am UTC](https://community.hubspot.com/t/navigation-menu/99233/2 "2024-02-02T00:24:00Z")

</div>

Hello @LMiginiac,

There is nothing wrong with the steps you are taking to create the navigation item.

The problem is with how this was developed and how the styling (CSS) was implemented for the navigation. Essentially, it was styled to not allow any additiontal top level navigation items. It allows only 4 navigation items with children and the 5th item is styled to be a button. However, if the 5th item has any children, it will not appear as a button either.

That is why you see “Resources” not match the styling of the first 4 links when you add “Industries”. What is even more concerning is that the Login link and “Let’s Talk” buttons change places when an item is added.

In order to fix this, the stylesheet for the theme would need to be adjusted. If you’re not familiar with CSS it can be quite difficult but let me know if you need help with that.

---

<div class="post-metadata">

**Author:** ![LMiginiac](https://avatars.discourse-cdn.com/v4/letter/l/f0a364/32.png) [@LMiginiac](https://community.hubspot.com/u/LMiginiac)\
**Post date:** [February 5, 2024, 1:54pm UTC](https://community.hubspot.com/t/navigation-menu/99233/3 "2024-02-05T13:54:37Z")

</div>

Hi @evaldas,

Thank you so much for your repsonse! I tried to correct the code but it didn’t work. May I ask for your help again proof reading my code?

{% require\_css %}  
\<style\>  
/\* Modified dark header \*/  
.header .header\_\_container {  
max-width: 1400px;  
}

.header\_\_menu .header\_\_navigation .submenu:not(.level-1) .menu-link {  
border-bottom: 1px solid #F4605D!important;  
padding: 10px 30px 10px 10px;  
}  
.hero\_section .button\_more a {  
background: #12cdd4!important;  
}  
.hero\_section .button\_more a:hover {  
background: #1e2633!important;  
}

.header, .header\_\_navigation {  
background-color: #000!important;  
}  
.header\_\_menu .header\_\_navigation .submenu:not(.level-1) .menu-link {  
color: #3d3e40!important;  
}  
.header\_\_menu .header\_\_navigation .menu-link {  
color: #fff!important;  
}  
.header\_\_menu .header\_\_navigation .level-1 .menu-item:nth-child(1) .menu-link,  
.header\_\_menu .header\_\_navigation .level-1 .menu-item:nth-child(2) .menu-link,  
.header\_\_menu .header\_\_navigation .level-1 .menu-item:nth-child(3) .menu-link,  
.header\_\_menu .header\_\_navigation .level-1 .menu-item:nth-child(4) .menu-link,  
.header\_\_menu .header\_\_navigation .level-1 .menu-item:nth-child(5) .menu-link {  
border-bottom: 1px solid #00c2b5;  
padding-bottom: 5px;  
}  
.submenu.level-2\>li {  
border-bottom: 0px solid #d0d0d0!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(6) .menu-link {  
background: #00c2b5;  
border-radius: 3px;  
color: #fff!important;  
display: inline-block;  
padding: 10px 20px;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7) .menu-link {  
top: -86px!important;  
right: 100px!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) .menu-link {  
top: -86px!important;  
right: 59px!important;  
color: #F4605D!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7) .menu-link,  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) .menu-link {  
position: absolute!important;  
color: #Ffff !important;  
display: inline-block!important;  
width: max-content;  
font-weight: 400;  
font-size: 14px;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7),  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) {  
padding: 5px 9px!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7) .menu-link:hover,  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) .menu-link:hover {  
color: #ffffff !important;  
}  
.header .header\_\_main-bar {  
padding: 1.5rem 0;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(6) .menu-link {  
background: #00c2b5!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:last-child .menu-link {  
background: transparent!important;  
border-radius: 0px!important;  
color: #fff;  
display: inline-block!important;  
padding: 10px!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:last-child .menu-link {  
background: transparent!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7), header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) {  
/\* background: aquamarine; \*/  
}

header.header .header\_\_menu .header\_\_navigation .submenu.level-1\>li\>.menu-link.active-branch:after,  
header.header .header\_\_menu .header\_\_navigation .submenu.level-1\>li\>.menu-link.active-item:after {  
background-color: transparent;  
}

header.header .header\_\_menu .header\_\_navigation .submenu:not(.level-1) .menu-link.active-branch {  
color: #ffffff !important;  
}

@media screen and (min-width: 768px) {  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7) .menu-link, header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) .menu-link {  
background: rgb(75 77 78) !important;  
padding: 9px 24px 9px !important;  
/\* margin-bottom: 10px !important; \*/  
}

header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) .menu-link:before {  
content: “|”;  
position: relative;  
left: -12px;  
font-size: 14px;  
top: -1px;  
color: #ddd;  
}  
.header\_\_main-bar .header\_\_container {

margin-top: 23px;  
}  
.header\_\_main-bar {  
position: relative;  
}

.header\_\_main-bar:before {  
content:“”;  
width:100%;  
position: absolute;  
left:0;  
height: 42px;  
background: rgb(75 77 78);  
top: 0;  
}

a.menu-link {}

.header\_\_logo img {  
margin-top: 12px;  
}  
}  
@media (max-width: 1208px) and (min-width: 768px) {  
.header\_\_navigation {  
padding-top: 10px;  
}

header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7) .menu-link {  
right: 93px!important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) .menu-link {

right: 46px!important;  
}  
.fixed-header1 header.header .header\_\_main-bar {  
position: fixed;  
width: 100%;  
left: 0;  
z-index: 999;  
top: 0;  
background: #000;  
padding: 10px 0;  
}

header.header {  
min-height: 124px;  
}

.fixed-header1 header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7), .fixed-header1 header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) {  
opacity: 0;  
}

.fixed-header1 header.header .header\_\_main-bar .header\_\_logo img.hs-image-widget {  
width: 160px !important;  
}

.fixed-header1 .header\_\_menu .header\_\_navigation .menu-link {  
font-size: 14px;  
}  
}  
@media screen and (max-width: 767px) {  
body .header\_\_mobile-menu-icon,  
body .header\_\_mobile-menu-icon:after,  
body .header\_\_mobile-menu-icon:before,  
body .menu-arrow-icon,  
body .menu-arrow-icon:after {  
background-color: #fff;  
}  
.header\_\_menu .header\_\_navigation .menu-link {  
width: 100%;  
}  
.header\_\_menu .header\_\_navigation .submenu:not(.level-1) .menu-link {  
color: #fff !important;  
background-color: transparent !important;  
padding: 10px 30px 5px 10px !important;  
}  
.header\_\_menu .header\_\_navigation .submenu.level-3 .menu-link {  
color: #3d3e40 !important;  
}  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(7) .menu-link,  
header.header .header\_\_menu ul.level-1\>li.no-submenu.menu-item:nth-child(8) .menu-link {  
position: static !important;  
padding: 2px 10px !important;  
}  
header.header .header\_\_menu .submenu.level-3 {  
background-color: #fff;  
}  
}  
\</style\>  
{% end\_require\_css %}

Did I miss something?

Thanks a lot!

LJ

---

<div class="post-metadata">

**Author:** ![LMiginiac](https://avatars.discourse-cdn.com/v4/letter/l/f0a364/32.png) [@LMiginiac](https://community.hubspot.com/u/LMiginiac)\
**Post date:** [February 5, 2024, 4:39pm UTC](https://community.hubspot.com/t/navigation-menu/99233/4 "2024-02-05T16:39:29Z")

</div>

Hi @evaldas,

It actually worked, I was just not in the correct module! Thank you so much for your help 🙂

Have a great day,

LJ