Mobile HubSpot CSS stylesheet adding a scroll bar

[ChelseaWright]

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? 

[Indra]

Hi @ChelseaWright,

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

So add these rules:

max-height: calc(100vh - 64px);
overflow: auto;
overscroll-behavior-y: contain;

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.

[Indra]

Hi @ChelseaWright,

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:

max-height: calc(100vh - 64px);
overflow: auto;
overscroll-behavior-y: contain;

The explanation:

- max-height: is based on viewport height minus the top bar that is 64px in height

- overflow auto: will break the height

- Overscroll-behavior-y: will disable scolling the page itself in the background

Your final result will be like:

custom-menu-primary.js-enabled .hs-menu-wrapper {
    width: 100%;
    position: fixed;
    top: 64px;
    left: 0;
    padding: 0;
    max-height: calc(100vh - 64px);
    overflow: auto;
    overscroll-behavior-y: contain;
}

[ChelseaWright]

@Indra 

Here is the mobile code that I am dealing with: 

/* ==========================================================================
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: 979px){

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

{% 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
.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: bottom;
position: static;
top: auto;
right: auto;
left: auto;
bottom: absolute;
padding: 0px;
margin: 0px;
background-image: none;
background-color: none;
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-align: center;
color: #ffffff;
}
.custom-menu-primary.js-enabled .hs-menu-wrapper {
width: 100%;
position: fixed;
top: 64px;
left: 0;
padding: 0;
max-height: calc(100vh - 64px);
overflow: auto;
overscroll-behavior-y: contain;
}

.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;
}

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

.mobile-trigger{
display: inline-block !important; /* Show button on mobile */
cursor: pointer; /* Mouse pointer type on hover */
position: absolute; /*******************************************/
top: 0px; /* Position Button at right of screen */
left: 0px; /*******************************************/
width: 65px; /* Button width */
height: 50px; /* Button height */
padding: 0px;
background: none; /* Background color */
border: none;
font-size: 24px;
font-weight: bold;
text-align: left;
text-transform: uppercase;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
/* color: #ffffff; */
color: #ffffff;
/* left: 550px; */
margin: 6px 0 0 0 !important;
background-color: transparent !important;
/* -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.075); */
/* -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.075); */
/* box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.075); */
/* border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25); */
line-height: 50px;
vertical-align: right;
/* background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); */
/* background-image: -o-linear-gradient(top,#fff,#e6e6e6); */
/* background-image: linear-gradient(to bottom,#fff,#e6e6e6); */
/* background-repeat: repeat-x; */
text-align:right;
}
.mobile-trigger:hover{
Color: #ffffff;
text-decoration: none;
background-position: none;
-webkit-transition: background-position;
-moz-transition: background-position ;
-o-transition: background-position;
transition: background-position;
Font-weight: bold;
background-color: transparent !IMPORTANT;
}
.mobile-trigger:after {
content: "\f0c9"; /* bars icon via fontawesome*/
display: inline-block;
font: normal normal normal 18px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
bottom:50%;
height:10px;
-webkit-transform:translateY(50%);
-ms-transform:translateY(50%);
transform:translateY(50%);
.webkit-font-smoothing: antialiased;
.moz-osx-font-smoothing: grayscale;
position: fixed;
top: 50px;
right: 11px;
color: #1a667a; /*controls color of icon*/
text-shadow: none;
}

/* Change button when menu is open */
.mobile-open .mobile-trigger{
content: "X"; /* X via fontawesome*/
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position;
-moz-transition: background-position;
-o-transition: background-position;
transition: background-position;
color: #1a667a;
background-color: none !IMPORTANT;
outline: none;
outline-offset: none;
}
.mobile-trigger:focus{
outline: none;
outline-offset: none;
}

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

.mobile-trigger i{
display: inline;
position: static;
top: 0;
}
.mobile-trigger i:before, .mobile-trigger i:after{
position: fixed;
content: '';
}
.mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{
width: 58px; /* Icon line width */
height: 0px; /* Icon line height */
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
background-color: none; /* Icon color */
display: inline-block;
}
.mobile-trigger i:before{
top: -6px; /* Position top line */
}
.mobile-trigger i:after{
top: 6px; /* Position bottom line */
}

.mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after,
.mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{
background-color: {{ aColorHoverMobile }}; /* Icon color */
}

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

.child-trigger{
display: inline !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: 35px !important; /* Button height */
padding: 0 !important;
}
.child-trigger:hover{
color: #ffffff;
text-decoration: none;
background-color: none !important;
}
.child-trigger i{
position: relative;
top: 37%; /* 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: 0px; /* Icon line height */
background-color: transparent; /* 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);
}

.custom-menu-primary ul>li .child-trigger:after {
color: #ffffff;
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: none;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #666;
margin-top: 12px;
margin-right: 24px;
}

.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;
}

/* Make child lists appear below parent items */
.custom-menu-primary ul.hs-menu-children-wrapper{
color: #ffffff;
visibility: visible !important;
opacity: 100% !important;
position: static !important;
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;
}

.body-container-wrapper {
margin-top: 64px;
}
}

[ChelseaWright]

@Indra 

I tried the above fix, but HubSpot is not recognizing overscroll-behavior-y. 

[webdew]

Hi @ChelseaWright ,

Pleae share website live link so i can review your code and let you know ho wyou can set scrolll in mobile OR send you style code

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

[ChelseaWright]

Hello,

Our website is www.vistastaff.com. We are trying to match the Hubspot mobile menu for our blogs and resource landing pages. Here is an example of the Hubspot link:  https://blog.vistastaff.com/workforce-optimization 

Thanks for response

[Indra]

Hi @ChelseaWright,

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?

[ChelseaWright]

Hello Indra,

Our website is www.vistastaff.com. We are trying to match the Hubspot mobile menu for our blogs and resource landing pages. Here is an example of the Hubspot link:  https://blog.vistastaff.com/workforce-optimization 

Thanks for response