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
/* ========================================================================== 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 */
} .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; }
/* ========================================================================== 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. */
{% 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 */
/* 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; }
/* 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 */ } }
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.
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.
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?
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! 🙂
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?
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?