Horizontal Navigation Desktop Top Stacked Mobile Navigation

Leann
Member

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!

0 Upvotes
3 Replies 3
jennysowyrda
Community Manager

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

0 Upvotes
dennisedson
Community Manager

@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

 

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Leann
Member

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

0 Upvotes