Submenu Items Issue

Develop, Build & Integrate CMS Development
,
1

Hi,

I’ve made some child items from one of our menus and it displays like the screenshot below? I assume I’ll have to go into the code to change this but have no idea where to look or what to do.

Ideally I would like to make the text white and the same as the other items but smaller.

Link to the site: https://biild.co.uk/

Screenshot 2023-08-03 105205.png
Screenshot 2023-08-03 105205.png957×759 42.5 KB

2

Hi @HBarden,

You could try adding the following styling to your website;

.hs-menu-wrapper .hs-menu-depth-2 {
 margin: 0;
}

.hs-menu-wrapper .hs-menu-depth-2 a {
 color: #fff;
 font-size: 1.25rem;
 padding: 12px 20px 12px 40px;
 display: inline-block;
}

@media screen and (min-width: 767px) {
 .hs-menu-wrapper .hs-menu-depth-2 a {
 font-size: 2rem;
 }
}

Should give you something like this;

Schermafbeelding 2023-08-03 om 12.44.15.png
Schermafbeelding 2023-08-03 om 12.44.15.png1004×1380 109 KB

3

Hi @Teun ,

I’ve added this but it hasn’t appeared to change the text colour, it still shows as blue?

4

Hi @HBarden ,
Could you try updating it to:

.header .hs-menu-wrapper .hs-menu-depth-2 {
 margin: 0;
}

.header .hs-menu-wrapper .hs-menu-depth-2 a:not(.button) {
 color: #fff;
 font-size: 1.25rem;
 padding: 12px 20px 12px 40px;
 display: inline-block;
}

@media screen and (min-width: 767px) {
 .header .hs-menu-wrapper .hs-menu-depth-2 a {
 font-size: 2rem;
 }
}
5

Perfect, that has worked! Thankyou.

6

One final question, is there a way to make it a drop down when you hover over the item, as these child items mean that you can’t see the full menu.

7

Hi @HBarden ,
Yeah definitely! Try adding the following:

.header .hs-menu-wrapper .hs-menu-depth-2 {
 margin: 0;
 width: 100%;
}

.header .hs-menu-wrapper .hs-menu-children-wrapper {
 transition: max-height 0.3s ease;
 max-height: 0;
 opacity: 0;
 overflow: hidden;
}

.header .hs-menu-wrapper .hs-item-has-children:hover .hs-menu-children-wrapper {
 max-height: 100vh;
 opacity: 1;
}

.header .hs-menu-wrapper .hs-menu-depth-2 a {
 color: #fff;
 font-size: 1.25rem;
 padding: 12px 20px 12px 40px;
 display: inline-block;
}

@media screen and (min-width: 767px) {
 .hs-menu-wrapper .hs-menu-depth-2 a {
 font-size: 2rem;
 }
}
8

Brilliant! That’s worked. Thank you so much for your help, this template for this website is a nightmare!!!

9

Awesome!! Happy I could help!