Styling dropdown menus - need to add to templates from migration
解決
Hello Community,
I'm brand new here, and I hope someone can point me in the right direction. We just had the first set of HubSpot templates made, based on the site we are migrating from. On the new site (we are not going live with the same content) I need to use sub menus.
As I added them through settings--> navigation they did appear, but as you can see below the style is not what we need.
I see the .css file created for me, but I don't know what needs to be changed/added to affect the sub menus.
We are a small outfit, and I'm learning as fast as I can 🙂
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper { left: 100%; top: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .row-fluid-wrapper:last-child .hs-menu-wrapper.hs-menu-flow-horizontal > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch { position: relative; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children { position: static; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:hover { color:#ff; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: inline-block; }
/* Vertical Menu ========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical { width: 100%; } .hs-menu-wrapper.hs-menu-flow-vertical ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-vertical li a { display: block; } .hs-menu-wrapper.hs-menu-flow-vertical > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a { width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children { position: relative; }
/* Flyouts */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; left: 0; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; } .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { left: 100%; top: 0; } .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; }
@media (max-width: 767px) { .hs-menu-wrapper, .hs-menu-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a, .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: block; }
/* Stacking Horizontal Nav for Mobile */ .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: visible !important; opacity: 1 !important; position: static !important; } .hs-menu-wrapper.hs-menu-flow-horizontal ul ul ul { padding: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { white-space: normal; }
/* Stacking Vertical Nav for Mobile */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { position: static; opacity: 1; visibility: visible; } }
I'm sorry that I've didn't reply earlier. I've quitted my job and wasn't allowed to take my HubSpot account with me.
As I was writing the code the child-indicator icon was inline with the navigation... After I've checked it now it's way over the navigation(as you've mentioned).
Look for this CSS Part
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after {
font-family:'FontAwesome';
content:"\f078";
top:-40px;
position:relative
}
and change it to
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after {
font-family:'FontAwesome';
content:"\f078";
top:-3px;
position:relative
}
For the mobile indicator issue: Search for following line in the CSS file
.child-trigger i, .child-trigger i:after{ background-color:{{VARIABLE}} or #HEX-CODE; }
if it's a variable like {{menuColorMobile}} you can
a) search for
set menuColorMobile
in your CSS and the value of it to a different color.
unfortunately it's a "direct" link to the template inside your portal which can only be viewed by members of the portal.
Generate a "link without display options" or use the template on a (non published) page and paste the preview link(can be found under the "eye"-icon in the small left sidebar when editing a page).
When I can view the template, I can provide you a CSS solution
regards
Anton
Did my post help answer your query? Help the Community by marking it as a solution
Thank you for your interest on Friday. I hope you enjoyed the weekend!
If you are still open to "When I can view the template, I can provide you a CSS solution" I had added a link that I believe works, and I'd love to see what we can do.
I have since explored and saw that the situation gets less usable in the current condition when it gets to a mobile phone. Missing the little "handle" to open the sub menu, makes it so that a click on "About" takes the user straight to the About page, and doesn't open an option for them to choose one of the sub menus.
I'm hoping to remedy that.
I'm looking through the "MAIN NAVIGATION" section of the .css to learn how it works, but don't yet have the confidence to change without breaking.
No need to apologize! I would appreciate any input if/when you have the time for it. I keep exploring to try to learn this...I even found some code in the .js that is related to the menus. Thank you for letting me know, good luck with your work!
this is the first step of the CSS. For best result search for each css class and paste the codes into the appropriate place in your main css file. The other(faster but not best way) would be to paste the code at the very bottom of your main css file.
After you've pasted(saved and published) it, I could provide further help.
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts>ul li.hs-item-has-children ul.hs-menu-children-wrapper{
background:#000000;
padding:8px 16px;
}
.custom-menu-primary .hs-menu-wrapper>ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a{
color:#ffffff;
font-weight:700
}
.custom-menu-primary .hs-menu-wrapper>ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a:hover{
color:#802528;
font-weight:700
}
.hs-item-has-children .child-trigger i{
font-family:'FontAwesome';
content:'\f107';
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper { left: 100%; top: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .row-fluid-wrapper:last-child .hs-menu-wrapper.hs-menu-flow-horizontal > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch { position: relative; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children { position: static; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:hover { color:#ff; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: inline-block; }
/* Vertical Menu ========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical { width: 100%; } .hs-menu-wrapper.hs-menu-flow-vertical ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-vertical li a { display: block; } .hs-menu-wrapper.hs-menu-flow-vertical > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a { width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children { position: relative; }
/* Flyouts */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; left: 0; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; } .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { left: 100%; top: 0; } .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; }
@media (max-width: 767px) { .hs-menu-wrapper, .hs-menu-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a, .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: block; }
/* Stacking Horizontal Nav for Mobile */ .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: visible !important; opacity: 1 !important; position: static !important; } .hs-menu-wrapper.hs-menu-flow-horizontal ul ul ul { padding: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { white-space: normal; }
/* Stacking Vertical Nav for Mobile */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { position: static; opacity: 1; visibility: visible; } }
Thank you so much! I'm amazed at what you invested to help me. I hope to pay it forward in this community as I advance in my understanding!
It took me this long to respond, as I've struggled to incorporate what you've added into the CSS that I saw.
Here is what I've done. I saw similar code to what you called "second" on line 614, and I've replaced the code from 614-703 with the code you called "Second".
I then couldn't figure out where to put the code you called "first", and finally just added it under the code you called "second". (Is there a better place for this?)
I see now the menu highlighting (I like your choices) and working.
I even see the little arrow that says there's more to this menu!
I'm working now to figure out two things:
1) I don't see an indication of the sub-menu (like the arrow) on mobile devices
2) The placement of the arrow on a desktop browser is above the menu line.
I'm sorry that I've didn't reply earlier. I've quitted my job and wasn't allowed to take my HubSpot account with me.
As I was writing the code the child-indicator icon was inline with the navigation... After I've checked it now it's way over the navigation(as you've mentioned).
Look for this CSS Part
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after {
font-family:'FontAwesome';
content:"\f078";
top:-40px;
position:relative
}
and change it to
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after {
font-family:'FontAwesome';
content:"\f078";
top:-3px;
position:relative
}
For the mobile indicator issue: Search for following line in the CSS file
.child-trigger i, .child-trigger i:after{ background-color:{{VARIABLE}} or #HEX-CODE; }
if it's a variable like {{menuColorMobile}} you can
a) search for
set menuColorMobile
in your CSS and the value of it to a different color.