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 to better understand my issue.
Is there anything I can do to fix this?
Thanks a lot for your help!
LJ
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.
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
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