CSS Style Sheet Mobile Child Trigger Update Needed

ChelseaWright
Member

We just updated our CSS style sheet and are having struggles with the mobile main menu. I need to update the child trigger:

ChelseaWright_0-1635361212109.png

 

To our new style: 

ChelseaWright_1-1635361261271.png

 

Can anyone help me with the HubSpot CSS code needed to make this happen?

 

CSS
0 Upvotes
7 Replies 7
Indra
Top Contributor | Diamond Partner

Hi @ChelseaWright,

 

Do you have a link to your site? It seems that your styling has been changed and therefor need to have a little adjustment.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution
ChelseaWright
Member

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

0 Upvotes
webdew
Top Contributor | Diamond Partner

HI @ChelseaWright ,

Please refer to this link ans update the css https://designers.hubspot.com/docs/snippets/responsive/how-to-implement-a-fixed-top-mobile-navigatio....

Hope this helps!


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

Thanks and Regards.

0 Upvotes
ChelseaWright
Member

@webdew 

 

I went through the steps and it breaks the menu even more:

 

ChelseaWright_0-1635529341842.png

then we when the scroll shows up and it falls off the page and won't let you access the rest of the page. 

 

ChelseaWright_1-1635529435873.png

Here is the code for the mobile menu: I need to change the characters that encourage the child menu to open. I need it to have it match the newly designed website: 

 

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

0 Upvotes
webdew
Top Contributor | Diamond Partner

@ChelseaWright This is because of the old CSS code. please remove the old CSS they conflict with the new CSS.

0 Upvotes
ChelseaWright
Member

@webdew 

 

I would love to load new CSS, but I am not a developer.

 

Because I do not have a developer I have to deal with what I have, which is just updating the old CSS.

 

When placing the new CSS stylesheet in HubSpot, it was not broken left and right and was not compliant with HubSpot.

 

So again, I ask, where in the current code, above, do I update the style of the drop-down from what we have now with the arrows pointing right, to our new current CSS?  

0 Upvotes
Indra
Top Contributor | Diamond Partner

Hi @ChelseaWright,

 

We cannot see how your site theme or template is build up since we don't have access to your portal.

 

Also it's good to ask a developer for you to assist. If you would like support on it you could check HubSpot Solutions Directory if there is any Service provider on Website development.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution