We just updated our website and are having to update the CSS stylesheet. I have been struggling with the mobile menu. We need to add a scroll bar for our main menu, and I am not having any luck with it working. Does anyone have the HubSpot CSS code to make this happen? Is it possible in HubSpot?
The css you have added isn't applied on your element so it looks like you are not loading the correct stylesheet. Be sure you add it to the Vista-2016.css.
There you need to add it where you have the comment:
/* Positions the menu to drop from the very top of the screen */
Also about overscroll-behavior-y property. This is so the background won't scroll. This is optional and not required but is user friendly. You can check browser support for it.
I see your styling of the blog is not yes the same as your corporate site. But functionally wise you need to add this css to the element custom-menu-primary.js-enabled .hs-menu-wrapper to get the same result:
/* ========================================================================== 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 = "#1a667a" %} /* Set Mobile Menu Background Color */ {% set aColorMobile = "#ffffff" %} /* white */ {% set aColorHoverMobile = "#ffffff" %} /* white */
/* * 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 .hs-menu-wrapper > ul li a { background-color: #1a667a; border-bottom: none !important; font-weight: normal !important; transition: 0s !important; } .custom-menu-primary .hs-menu-wrapper > ul li a:hover { color: #ffffff !important; background: transparent !important; box-shadow: none !important; transition: 0s !important; } .custom-menu-primary .hs-menu-wrapper > ul li:hover { background-color: transparent !important; border-bottom: none !important; } .custom-menu-primary .hs-menu-wrapper > ul > li:hover > a { color: #ffffff; text-decoration: underline; background-color: transparent !important; box-shadow: none !important; transition: 0s !important; }
.custom-menu-primary ul ul li:first-child:hover a { color: #ffffff !important; } .custom-menu-primary ul ul ul li:first-child:hover a { color: #ffffff !important; }
.custom-menu-primary ul ul li .child-trigger i, .custom-menu-primary ul ul li .child-trigger i:before, .custom-menu-primary ul ul li .child-trigger i:after{ height:0; } .custom-menu-primary ul ul>li.hs-item-has-children:after { display: none; } .custom-menu-primary ul ul>li .child-trigger:after { display: block; content: " "; color: #ffffff; float: right; width: 0; height: 0; border-color: none; border-style: none; border-width: none; border-left-color: none; margin-top: 8px; margin-right: 24px; }
/* Menu Styles on Mobile Devices ========================================================================== */
.custom-menu-primary.js-enabled{ position: left; padding-top: 65px; /* Makes room for button */ margin: 0 0 0 0; height: 64px; }
/* Hide menu on mobile */ .custom-menu-primary.js-enabled .hs-menu-wrapper, .custom-menu-primary.js-enabled .hs-menu-children-wrapper{ color: #ffffff; display: none; }
/* Mobile Menu Styles */ .custom-menu-primary.js-enabled .hs-menu-wrapper{ width: 100%; position: fixed; /**************************************************************/ top: 130px; /* Positions the menu to drop from the very top of the screen */ left: 0; /**************************************************************/ padding: 0; } .custom-menu-primary .hs-menu-wrapper{ background-color:#1a667a; /* 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 { /* padding:0px !important; */ } .custom-menu-primary .hs-menu-wrapper > ul > li{ position: relative; } .custom-menu-primary .hs-menu-wrapper > ul > li a{ color: #ffffff; 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{ color: #ffffff; } .custom-menu-primary .hs-menu-wrapper > ul li a{ color: #ffffff; background-color: transparent; border-bottom: 1px solid #222; font-size: 15px; font-weight: bold; padding: 9px 15px; line-height: normal; } .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 { color: #ffffff; border: none; border-radius: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .custom-menu-primary .hs-menu-wrapper > ul ul li{ background color: transparent; background: transparent; /*text background when hover and background - will cover text*/ } .custom-menu-primary .hs-menu-wrapper > ul ul li a{ font-size: 14px; /* Font size of child lists */ background-color: #1a667a; /*background of whole menu*/ color: #ffffff; border-bottom: none; margin-left: 10px; } .custom-menu-primary .hs-menu-wrapper > ul ul > li:hover > a { color: #ffffff; text-decoration: underline; } .custom-menu-primary .hs-menu-wrapper > ul ul li:last-child a { color: #ffffff; border-bottom:none; } /* Level 3 and Higher Menu List Styles */ .custom-menu-primary .hs-menu-wrapper > ul ul ul li a{ color: #ffffff; background-color: transparent; border-bottom: 1px solid #222; } .custom-menu-primary .hs-menu-wrapper > ul ul ul ul li a{ color: #ffffff; background-color: #1a667a; }
.custom-menu-primary .hs-menu-wrapper>ul >li:nth-child(2) ul { width: 100% !important; color: #ffffff; } .custom-menu-primary .hs-menu-wrapper>ul >li ul ul { width: 100% !important; left: 0 !important; top: 0 !important; padding-bottom:0 !important; color: #ffffff; } .custom-menu-primary .hs-menu-wrapper>ul >li:nth-child(4) ul { width: 100% !important; } .custom-menu-primary .hs-menu-wrapper>ul ul ul li:last-child a { background-color: #1a667a; border-bottom: 1px solid #222; padding-bottom:8px; } .custom-menu-primary .hs-menu-wrapper>ul ul ul { margin-bottom:0px; } .custom-menu-primary .hs-menu-wrapper>ul>li:nth-child(4) ul ul { width: 100% !important; min-width: auto; }
You can change your mobile menu just the way you like it. Can you share your site link and a screenshot what's the difference what you would like to have?