Navigation CSS

[sconner91]

We recently redesigned our website which included a new navigation bar. I am updating the landing pages from pre-existing templates which did not include child navigation items and I am running into two issues. 

1. The child navigation menu is not spreading across the whole screen, it always starts below the parent menu item selected instead of to the left of the screen.

2. On Mobile the child menu items should fall vertically below the parent item but are displaying horizontally and beginning about 50% across the screen. This means only half of one child item is showing. Below is the css for this area, does anyone have an idea?

- This was a pre-existing css so I am not familiar with how it was built

/* ==========================================================================

3. MAIN NAVIGATION

========================================================================== */

/* ==========================================================================
Custom Menu Primary
========================================================================== */

{% set ulColor = "" %} /* Set ul background color */
{% set liColor = "" %} /* Set li background Color */
{% set aColor = "#fff" %} /* Set link Color */
{% set aColorHover = "#2b4755" %} /* Set link Hover Color */

/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul{
background:{{ ulColor }};
display: table;
width: 100%;
}

.custom-menu-primary .hs-menu-wrapper > ul > li{
background:{{ liColor }};
display: table-cell;
float: none!important;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a{
color:{{ aColor }};
padding-right: 25px !important;

display: block;
position: relative;
text-decoration: none;
padding: 11px 11px;
font-size: 18px;
font-weight: 300;
font-family: "museo-sans-condensed";
line-height: 16px;
text-align: center;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{
color:#fff;
background:#2b4755;
}
.custom-menu-primary .hs-menu-wrapper>ul>li.active>a {
color: #fff;
}
/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul{
display: inline-block;
position: absolute;
width: 900px;
height: 40px;
float: left;

}
.custom-menu-primary .hs-menu-wrapper > ul ul li{
background:{{ liColor }};
display: table-cell;

}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{
color:#fff;
background:#2b4755;
display: block;
position: relative;
width: 990px;
text-decoration: none;
padding: 11px 12px;
font-size: 18px;
font-weight: 300;
font-family: "museo-sans-condensed";
line-height: 18px;
text-align: center;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{
color:#ff9933;
}

/* 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;
}

/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width:991px) {
.custom-menu-primary .hs-menu-wrapper {
display:visible !important;
}

.custom-menu-primary .hs-menu-wrapper>ul>li:first-child {
display: visible;
}
.custom-mobile-header {
display: none!important;
}
.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item.hs-menu-depth-6.hs-item-has-children>ul {
display: none;
}
}

/* ==========================================================================
Mobile Menu - Hubspot Standard Toggle Menu
========================================================================== */

/**
* Special Note
*
* When the menu is open, a class of .mobile-open is applied to the body. You can
* use this for custom styling on any element when the menu is in the open position.
*/

.mobile-trigger, .child-trigger{
display: none; /* Hide button on Desktop */
}

@media (max-width: 990px){

/* Variables
========================================================================== */

{% set menuColorMobile = "#f93" %} /* Set Mobile Menu Background Color */
{% set aColorMobile = "#ffffff" %} /* Set Link Color */
{% set aColorHoverMobile = "#ffffff" %} /* Set Link Hover Color */

/*
* Menu Reset
*
* Remove styling from desktop version of custom-menu-primary. Place any
* additional CSS you want removed from the mobile menu in this reset
*/

.custom-menu-primary,
.custom-menu-primary .hs-menu-wrapper > ul,
.custom-menu-primary .hs-menu-wrapper > ul li,
.custom-menu-primary .hs-menu-wrapper > ul li a{
display: block;
float: none;
position: static;
top: auto;
right: auto;
left: auto;
bottom: auto;
padding: 0px;
margin: 0px;
background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-width: none;
width: 100%;
height: auto;
line-height: 1;
font-weight: normal;
text-decoration: none;
text-indent: 0px;
text-align: left;
color:{{aColorMobile}};
}

/* Toggle Button
========================================================================== */

.mobile-trigger{
display: inline-block !important;
cursor: pointer;
position: absolute;
top: -75px;
right: 20px;
width: 45px;
height: 45px;
padding: 7px 10px 8px 10px;
text-transform: uppercase;
background-color: #2b4755;
border: solid 1px #223b47;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #406273),color-stop(100%, #2b4755));
background-image: -moz-linear-gradient(top, #406273,#2b4755);
background-image: -webkit-linear-gradient(top, #406273,#2b4755);
background-image: linear-gradient(to bottom, #406273,#2b4755);
color: #FFF;
}
.mobile-trigger:hover{
text-decoration: none; /* Removes link text underline on button */
}

/* Change button when menu is open */
.mobile-open .mobile-trigger{
color:{{ aColorHoverMobile }};
}

/* Toggle Button Icon
========================================================================== */

.mobile-trigger span {
font-size: 21px;
color: #FFF;
text-align: center;
padding-top: 4px;
display: block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 21px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.mobile-trigger span:before {
content: "\f0c9";
}

/* Child Toggle Button
========================================================================== */

.child-trigger{
display: block !important; /* Hide button on Desktop */
cursor: pointer; /* Mouse pointer type on hover */
position: absolute;
top: 0px;
right: 0px;
width: 55px !important; /* Button width */
min-width: 55px !important;
height: 45px !important; /* Button height */
padding: 0 !important;
border-left: 1px dotted rgba(255, 255, 255, .20);
}
.child-trigger:hover{
text-decoration: none;
}
.child-trigger i{
position: absolute;
top: 50%; /* Centers icon inside button */
margin: 0 auto !important;
}
.child-trigger i:after{
position: absolute;
content: '';
}
.child-trigger i, .child-trigger i:after{
width: 10px; /* Icon line width */
height: 1px; /* Icon line height */
background-color:{{ aColorMobile }}; /* Icon color */
display: block;
}
.child-trigger i:after{
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.child-trigger.child-open i:after{
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.child-trigger.child-open i{
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}

/* Menu Styles on Mobile Devices
========================================================================== */

.custom-menu-primary.js-enabled{
position: relative;
padding-top: 44px; /* Makes room for button */
margin: 10px 0 10px 0;
}

/* Hide menu on mobile */
.custom-menu-primary.js-enabled .hs-menu-wrapper,
.custom-menu-primary.js-enabled .hs-menu-children-wrapper{
display: none;
}

/* Make child lists appear below parent items */
.custom-menu-primary ul.hs-menu-children-wrapper{
visibility: visible !important;
opacity: 1 !important;
position: static !important;
display:none;

}

/* Mobile Menu Styles */
.custom-menu-primary.js-enabled .hs-menu-wrapper{
width: 100%;
position: relative; /**************************************************************/
top: 0; /* Positions the menu to drop from the very top of the screen */
left: 0; /**************************************************************/
padding: 0;
}
.custom-menu-primary .hs-menu-wrapper{
background-color:{{ menuColorMobile }}; /* Menu background color set off global menuColorMobile variable */
width: 100%; /* Full screen width */
}

/* Level 1 Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul > li{
position: relative;
}
.custom-menu-primary .hs-menu-wrapper > ul > li a{
font-size: 22px; /* Font size of top level list items */
line-height: 45px;
overflow: visible;
}

/* Level 1 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul li{
border-top: 1px dotted rgba(255, 255, 255, .35); /* Adds transparent dark highlights to top of top level list items */
}
.custom-menu-primary .hs-menu-wrapper > ul li a{
padding: 0 10px;
color:{{ aColorMobile }}; /* link color set by global mobile-aColor variable */
}
.custom-menu-primary .hs-menu-wrapper > ul li a:hover{
color:{{ aColorHoverMobile }}; /* link hover color set by global mobile-aColorHover variable */
}

/* Level 2 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul ul li{
background-color: rgba(255, 255, 255, .08);
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{
text-indent: 10px; /* Indent Child lists */
font-size: 16px; /* Font size of child lists */
}

/* Level 3 and Higher Menu List Styles */
.custom-menu-primary .hs-menu-wrapper > ul ul ul li a{
text-indent: 30px; /* Indent Child lists */
}
.custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a{
text-indent: 50px; /* Indent Child lists */
}
}

[Ty]

Hi sconner,

Great work on the redesign! I took a look at your site and noticed just a few small things that could help you out in your css. Keep in mind, I did this through inspect element and didn't actually jump into your portal. 

So first on, let's tackle the sizing in desktop view. Since the menu's structure is using ULs and LIs, and you have it fixed, the submenu gets constrained to the width of it's UL. I fixed this by making your submenu also 'position:fixed;' so it will scroll along with your header/navigation. I put this in a media query, but you could just put it where you style for your desktop screens aswell.

@media (min-width: 990px){
	.hs-menu-children-wrapper{
		position: fixed;
	    width: 100%;
	}
}

Now that the desktop screen is fixed, we can tackle mobile! Mobile was a little more difficult, but the basic thing that was messing it up was the children of the dropdown were still being displayed as 'table-cell's. Which will let the div run on and on, without ever breaking to a new line.

So first thing I did was to make all of your menu links (lis) clear each other so they would stack at '100%' width. Then we can go after your children divs rapper. The reason you couldn't see the divs stack was because you declared it's height at '40px', which would hide the options. I set your height to '100%' and that fixed your stacking. I also put this one in a media query, but you could always just copy the code and paste it into your existing media query.

@media (max-width: 989px){
	.hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children{
		clear:both;
		width:100%
	}

	.hs-menu-children-wrapper{
		width:100%;
		height:100%;
	}

	.custom-menu-primary .hs-menu-wrapper>ul ul li{
		display:block !important;
	}
}

And that should be it! You should be good to go on your navigation, hope this helps you out! Let me know if you have any other problems!

-- Ty

[sconner91]

Thanks Ty!

It is actually only on our HubSpot landing pages, one page can be seen here:

https://resources.mediaradar.com/custom-solutions

Were you looking at the regular site or just landing pages?

[Ty]

Hi sconner, I actually checked the most recent landing page you published, so I believe it was the same one you just linked 🙂

[sconner91]

Oh, great! Sorry - I am still having the same issues when updating so wasn't sure if we were looking at the same thing. Did you remove any of the code or just insert those two media queries?

[Ty]

I just inserted those two media queries, I can take another look if you'd like.

-- Ty

[sconner91]

That would be great, thank you!

[Ty]

Hi Sconner, so I went in and inserted them into your "MediaRadar-Jan2016-style-customsolutions-_test.css".

This is the line I put to fix it in desktop

Here is the line I used for the mobile fix

I checked the menu on multiple site pages, including this one in particular.

This is how they are displaying for me, do you see the same/is this the look you were going for?

Desktop Menu w/ Hover

Mobile Menu (Closed)

Mobile Menu (Open)

Please let me know if this is what you were looking for, if you see an issue with a nav on a page I might have missed, let me know and I'll get you a fix asap! 🙂

Hope this helps!

-- Ty

[sconner91]

Hi Ty,

Thank you so much! The Custom Solutions page looks great.

The only other pages are our form landing pages such as contact us: https://resources.mediaradar.com/contactus 

They are using the: custom/page/MediaRadar-Jan2016_Theme/MediaRadar-Jan2016-style.css 

I tried to replicate your change but I think there is something different in that code that is impacting it. Could you take a look at that as well?

Thanks again!

[Ty · Accepted solution]

Hi Sconner, 

I took a quick look, it seems like the styling for the headers that are always displayed (such as /Industries) was overwriting the 100% width style.

Updated the 100% width style and you should be good to go!

Let me know how it looks!

-- Ty

[sconner91]

That is perfect - thanks so much for your help with this!

[Ty]

No problem! Glad we could get it all sorted out! 🙂

[FolieADeux]

Hi Ty!

I think I'm having a similar issue but to no avail. I tried to follow your instruction above but still having issues with mobile menu trigger. Also, the children are expanded on smallest view?

Any help would be really appreciated!

This page

[Ty]

Hi @FolieADeux, sorry for the late reply, haven't been able to help out on community as much as I'd like to be able to due to some larger projects on my team.

If you're still having this issue, I'd be happy to take a look, could you spin up a preview or example page?

-- Ty