Horizontal Navigation Desktop Top Stacked Mobile Navigation

[Leann]

Hello,

I've created an update top navigation in hubspot CSS to reflect our new website theme, but there are a few issues that need to be resolved:

 - Changing the navigation for mobile and tablet screens to a stacked 'hamburger' menu in the top right of the page.

 - Links in the nav are not working

 - Child link in navigation is not visible.

You can preview this new nav at: http://balance.fluidstance.com/-temporary-slug-2e35dbc7-c5a6-4ceb-9aef-b5ecf6ebbcb6?hs_preview=mZEkY...

Here is css for the what the current state of this new navigations:

/* New Nav */

.topnav-horizontal ul {
list-style: none;
background-color: #000;
text-align: center;
padding: 0;
margin: 0;
}

.topnav-horizontal li {
font-family: "Lato","HelveticaNeue","Helvetica Neue",sans-serif;
font-size: .8em !important;
line-height: 40px;
text-align: center;
}

.topnav-horizontal a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}

.topnav-horizontal a:hover {
color: #888888;
}

.topnav-horizontal a.active {
background-color: #aaa;
color: #444;
cursor: default;
}

/* Sub Menus */
.topnav-horizontal li li {
font-size: .8em;

}

/*******************************************
Style menu for larger screens

Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
.topnav-horizontal li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}

.topnav-horizontal a {
border-bottom: none;
}

.topnav-horizontal > ul > li {
text-align: center;
}

.topnav-horizontal > ul > li > a {
padding-left: 0;
}

/* Sub Menus */
.topnav-horizontal li ul {
position: absolute;
display: none;
width: inherit;
}

.topnav-horizontal li:hover ul {
display: block ;
}

.topnav-horizontal li ul li {
display: block;
}
}

Help with these three items would be truely appreciated!

[dennisedson]

@Leann, you should consider leveraging the advanced custom menus.  they would help with some of the heavy lifting.

two resource links for you

setting up your navigation

enabling mobile menu

[Leann]

Hi,

Yes, we are still having issues with this.  We had to hire a developer to look into this issue since there were no responses via the community.

Thank you

[jennysowyrda]

Hi @Leann,

Are you still struggling with this issue? 

What troubleshooting have you tried so far? The more information, details and screenshots you can provide, the better the community can assist.

Thanks,
Jenny