Styling dropdown menus - need to add to templates from migration

[Avi25]

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 🙂

Any suggestions would be appreciated! 

[Anton · Accepted solution]

Hi @Avi25, 

yeah you've put the code in the right position.

Since it was a bit challenging to write everything seperatly I've now copied the whole CSS and "designed" it localy. 

Here are the snippets

- first one(line 234 - 433)

.hs-menu-wrapper.hs-menu-flow-horizontal ul {
 list-style: none;
 margin: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
 display: inline-block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul:before {
 content: " ";
 display: table;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul:after {
 content: " ";
 display: table;
 clear: both;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
 float: left;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
 display: inline-block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
 position: relative;
 padding-right:15px;
 height:50px;
 
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after {
 font-family:'FontAwesome';
content:"\f078"; 
top:-40px;
position:relative
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover:after {
color:#fff
}
.hs-menu-wrapper.hs-menu-flow-horizontal.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;
 background:#000;
 left: 0;
}


.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;
 }
}

.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
 visibility: visible;
 opacity: 1;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
 display: block;
 visibility: visible;
 opacity: 1;
}

- second(line 1221 - 1333)

/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul{}
.custom-menu-primary .hs-menu-wrapper > ul > li{	
	-webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;}
.custom-menu-primary .hs-menu-wrapper > ul > li:hover a{
	color:#fff;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a{}
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{}

/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul{
  background-color: #fff;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li{
	-webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
	padding:8px 16px;
	min-width:124px;
	
}
.custom-menu-primary .hs-menu-wrapper > ul ul li:hover{
	background-color:#802528;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li:hover a{
	color:#fff !important;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{}
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{}

/* Override max width on menu links */
.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 {
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
}
.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.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper{
	background:#000000;
	padding:8px 16px;
	width: 100%;
	text-align: left;
}
.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:#fff;
	font-weight:700
}
.hs-item-has-children .child-trigger i{
	font-family:'FontAwesome';
	content:'\f107';
}
/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width: 876px) {
    .custom-menu-primary .hs-menu-wrapper,
    .custom-menu-primary .hs-menu-wrapper > ul ul { 
        display:block !important;
    }
  
  
  .custom-menu-primary {
    float: right !important;
    text-align: right;
  }

  .custom-menu-primary .hs-menu-wrapper > ul {
    padding-top: 25px;
  }

  
  .custom-menu-primary .hs-menu-wrapper > ul > li {
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  
  .custom-menu-primary .hs-menu-wrapper > ul > li:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  .custom-menu-primary .hs-menu-wrapper > ul > li:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .custom-menu-primary .hs-menu-wrapper > ul > li > a {
    position: relative;
    display: block;
    padding: 10px 22.5px;
    font-size: 20px;
    font-size: 2rem;
    color: #222;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
  }

  .custom-menu-primary .hs-menu-wrapper > ul > li:hover {
    background: #1e1e20;
	  color:#fff;
  }  
  

}

Hope this helps

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[Anton]

Hi @Avi25, 

welcome to the board. 

It would be very helpful, if we could have a (preview-)link and a description how you want to have the submenu to look 😉

regards,

Anton

[Avi25]

Hi @Anton,

Here is a preview of a template https://app.hubspot.com/design-previewer/4605825/templates/6289655943

Is this that kind of link you were looking for?

And...for styling, for the dropdown, I'd like:

• The same font style,  background, and highlight as the main menu, with less height (I can likely play with details once I see code).
• I'd like to add a little arrow or some other indication near the menu item that has children.

Do I need any other parameters?

Thank you!

[Anton]

Hi @Avi25,

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

[Avi25]

Hi @Anton,

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.

[Anton]

Hi @Avi25

sorry for the long reply. I'm currently a bit full with work.

I will provide you the nessesary code until end of day

regards

Anton

[Avi25]

Hello @Anton,

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! 

[Anton]

Hi @Avi25

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';
}

regards

Anton

[Avi25]

Hi @Anton!

I've put the new code in...I hope it's in the right place! It does have some of the desired effects, so it seems step 1 is a go!

[Anton · Accepted solution]

Hi @Avi25, 

yeah you've put the code in the right position.

Since it was a bit challenging to write everything seperatly I've now copied the whole CSS and "designed" it localy. 

Here are the snippets

- first one(line 234 - 433)

.hs-menu-wrapper.hs-menu-flow-horizontal ul {
 list-style: none;
 margin: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
 display: inline-block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul:before {
 content: " ";
 display: table;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul:after {
 content: " ";
 display: table;
 clear: both;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
 float: left;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
 display: inline-block;
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
 position: relative;
 padding-right:15px;
 height:50px;
 
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:after {
 font-family:'FontAwesome';
content:"\f078"; 
top:-40px;
position:relative
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover:after {
color:#fff
}
.hs-menu-wrapper.hs-menu-flow-horizontal.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;
 background:#000;
 left: 0;
}


.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;
 }
}

.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
 visibility: visible;
 opacity: 1;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
 display: block;
 visibility: visible;
 opacity: 1;
}

- second(line 1221 - 1333)

/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul{}
.custom-menu-primary .hs-menu-wrapper > ul > li{	
	-webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;}
.custom-menu-primary .hs-menu-wrapper > ul > li:hover a{
	color:#fff;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a{}
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{}

/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul{
  background-color: #fff;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li{
	-webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
	padding:8px 16px;
	min-width:124px;
	
}
.custom-menu-primary .hs-menu-wrapper > ul ul li:hover{
	background-color:#802528;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li:hover a{
	color:#fff !important;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{}
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{}

/* Override max width on menu links */
.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 {
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
}
.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.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper{
	background:#000000;
	padding:8px 16px;
	width: 100%;
	text-align: left;
}
.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:#fff;
	font-weight:700
}
.hs-item-has-children .child-trigger i{
	font-family:'FontAwesome';
	content:'\f107';
}
/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width: 876px) {
    .custom-menu-primary .hs-menu-wrapper,
    .custom-menu-primary .hs-menu-wrapper > ul ul { 
        display:block !important;
    }
  
  
  .custom-menu-primary {
    float: right !important;
    text-align: right;
  }

  .custom-menu-primary .hs-menu-wrapper > ul {
    padding-top: 25px;
  }

  
  .custom-menu-primary .hs-menu-wrapper > ul > li {
    -webkit-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  
  .custom-menu-primary .hs-menu-wrapper > ul > li:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  .custom-menu-primary .hs-menu-wrapper > ul > li:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  .custom-menu-primary .hs-menu-wrapper > ul > li > a {
    position: relative;
    display: block;
    padding: 10px 22.5px;
    font-size: 20px;
    font-size: 2rem;
    color: #222;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
  }

  .custom-menu-primary .hs-menu-wrapper > ul > li:hover {
    background: #1e1e20;
	  color:#fff;
  }  
  

}

Hope this helps

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[Avi25]

Hello @Anton!

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'll let you know if/when I figure this out 🙂

Thank you again!!

Avi

[AntonB · Accepted solution]

Hi @Avi25,

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.

b) replace it with a HEX Code.

For example 

background-color:{{menuColorMobile}};

changed

background-color:#000000;

regards

Anton

[Avi25]

Thank you @AntonB! You have helped again!

I wish you success at your next endeavor. 

[Avi25]

OK! Let's try this....it's a published page (but not on our domain yet)...work in progress 🙂

http://thefiremountainschool-4605825.hs-sites.com/blog/2018/05/07/energy-is-the-key-to-wellness

This one is a preview without display options:

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Do one of these work?

Thanks for your guidance @Anton!