Responsive Header After Migration

GBonner · November 30, 2021, 12:44pm

Hi all,
Having difficulties getting this menu to fucntion properly, font and spacing is not responding correctly to different sized screens or different levels of zoom. Namely the pricing (final) tab.
Any help on what i should be changing to fix this would be appreaciated.

CSS Style sheet is pasted below:

.custom-header-height {
height:95px;
}

.header__container {
margin-left: auto;
margin-right: auto;
max-width: 940px;
min-width:100%;
width:auto;
}

.custom-header {
z-index: 1000;
top: 0px;
min-width: 100%;
margin-top: 0px;
padding: 20px 20px 16.25px;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
position: fixed;
display: block;
}

.header-inner {
margin:0 -10px;
}

.custom-logo {
position: relative;
float: left;
width: 16.66666667%;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}

.custom-logo a {
position: relative;
float: left;
text-decoration: none;
color: #333333;
left: 20px;
display: block;
}

.custom-logo img {
width: 150px !important;
}

.custom-header-right {
position: relative;
float: left;
padding: 0 10px;
width: 83.33333333%;
}

.custom-menu-primary {
position: relative;
float: left;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: auto;
min-width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}

.custom-menu-primary .hs-menu-wrapper>ul {
margin-top: 10px;
}

.custom-menu-primary .hs-menu-wrapper>ul:after,
.custom-menu-primary .hs-menu-wrapper>ul:before {
content:“”;
clear:both;
display:table;
}

.custom-menu-primary .hs-menu-wrapper>ul>li {
position: relative;
float: left;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item {
width: 16.66666667%;
display: inline-block;
text-align: center;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item>a {
margin-right: -31.0625px;
margin-left: 17.9062px;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(4) {
width: 4;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(5)>a {
margin-left: 100px;
margin-right:auto;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(5) {
margin-left: 0;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:not(:nth-of-type(5))>a {
position: relative;
vertical-align: top;
text-decoration: none;
text-align: left;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
font-size: 16.5px;
display:inline-block;
}

.custom-menu-primary .hs-menu-wrapper>ul>li>a,
.header-button .hs-button {
padding: 10px;
font-size: 18px;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.header-button {
width: 8.33333333%;
}

.custom-menu-primary .hs-menu-wrapper>ul>li:not(:first-of-type),
.header-button>.hs_cos_wrapper_type_module {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.custom-menu-primary .hs-menu-wrapper>ul>li:not(:first-of-type)>a {
margin-bottom: 4px;
}
.custom-menu-primary .hs-menu-wrapper>ul>li:nth-last-of-type(2)>a,
.header-button .hs-button {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
z-index: 2;
margin-left: 100px;
}

.header-button .hs-button {
border-style: solid;
border-width: 1px;
border-radius: 3px;
max-width: 159px;
margin:0 60px 0 70px;
font-weight: 400;
font-size:16px;
line-height:20px;
text-align: center;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(4)>a {
margin-right:0;
}

.custom-menu-primary .hs-menu-wrapper>ul>li>a {
line-height:20px;
}

.custom-menu-primary .hs-menu-wrapper>ul>li:first-of-type>a {
display:inline-block;
}

.custom-menu-primary .hs-menu-wrapper>ul ul li a {
position: relative;
vertical-align: top;
text-decoration: none;
text-align: left;
margin-left: auto;
margin-right: auto;
white-space: nowrap;
padding: 10px;
display: block;
font-size: 16px;
line-height:20px;
font-weight: 400;
}

.custom-menu-primary .hs-menu-wrapper>ul li>ul {
border: 2px solid;
border-radius: 3px;
min-width:100%;
}

.custom-menu-primary .hs-menu-wrapper>ul li.hs-menu-item:nth-of-type(4)>ul {
border-radius:4;
}

@media (min-width:992px) {
.custom-menu-primary .hs-menu-wrapper>ul li>ul {
position:absolute;
z-index:100;
top:100%;
left:17.9062px;
display:block !important;
opacity:0;
visibility:hidden;
transition:all .3s ease-in-out;
}

.custom-menu-primary .hs-menu-wrapper>ul li:hover>ul {
opacity:1;
visibility:visible;
}

.custom-menu-primary .hs-menu-wrapper>ul>li>ul ul {
top:0;
left:100%;
}

.custom-menu-primary .hs-menu-wrapper>ul>li:last-of-type>ul {
right:0;
left:auto;
}

.custom-menu-primary .hs-menu-wrapper>ul>li:last-of-type>ul ul {
right:100%;
left:auto;
}
}

@media (min-width:1920px) {

.custom-header {
padding: 20px 20px 8.421px;
}
.custom-logo img {
width:170px !important;
}

.header-button .hs-button {
max-width: 236px;
font-size: 20px;
line-height: 20px;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:not(:nth-of-type(5))>a {
font-size:30px;
}
}

@media (max-width:1450px) and (min-width:992px) {

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item,
.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(4) {
width: 12.666667%;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(5)>a {
margin-left: 17.9062px;
}
}

@media (max-width:991px) {

.custom-header-height {
height:63px;
}

.custom-header {
height: auto;
padding: 11px;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}

.custom-logo {
left: 20px;
}

.navbar-menu-button {
padding: 18px;
font-size: 24px;
cursor: pointer;
position: absolute;
left: auto;
top: auto;
right: 0%;
bottom: auto;
float: left;
color: white;
display: block;
}

.header__container {
max-width: 728px !important;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
min-width: 70%;
margin-right: 20px;
margin-left: 20px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-webkit-flex: 0 auto;
-ms-flex: 0 auto;
flex: 0 auto;
}

.header-inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

.custom-menu-primary {
width: auto;
min-width: 100%;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background-color: #5e5e5e;
transform: translateY(-100%) translateX(0px);
transition: transform 400ms ease 0s;
}

.mobile-open .custom-menu-primary {
transform: translateY(0%) translateX(0px);
}

.custom-menu-primary .hs-menu-wrapper>ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
max-height:calc(100vh - 80px);
overflow-x:hidden;
overflow-y:auto;
scroll-width:none;
-ms-overflow-style:none;
}
.custom-menu-primary .hs-menu-wrapper>ul::-webkit-scrollbar {
display:none;
}
.custom-menu-primary .hs_cos_wrapper_type_menu,
.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item>a,
.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(4),
.custom-menu-primary .hs-menu-wrapper>ul>li.header-button {
width:100%;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item,
.custom-menu-primary .hs-menu-wrapper>ul>li.header-button {
width: 100%;
padding:0 10px;
flex-wrap:wrap;
-ms-flex-wrap:wrap;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item>a {
display: block;
margin-right: 0;
margin-left: 0;
text-align: left;
}

.child-trigger {
font-family: ‘webflow-icons’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin-right: 20px;
width: 40px;
height: 40px;
font-size: 18px;
z-index: 1;
cursor: pointer;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}

.child-trigger:before {
content: “\e603”;
}

.navbar-hamburger {
font-family: ‘webflow-icons’;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
}

.navbar-hamburger:before {
content: “\e602”;
}

.mobile-menu {
position: absolute;
overflow: hidden;
top: 100%;
left: 0;
right: 0;
width: 100%;
height: 100vh;
pointer-events:none;
}

.mobile-open .mobile-menu {
pointer-events:all;
}
.custom-menu-primary .hs-menu-wrapper>ul>li:not(:first-of-type)>a {
margin-bottom:1px;
}
.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(5)>a{
margin:0;
}

.custom-menu-primary .hs-menu-wrapper>ul li>ul {
display:none;
}

.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(5) {
padding-left: 20px;
}

.header-button .hs-button {
margin-top: 10px;
margin-bottom: 20px;
margin-left: 10px;
width:100%;
}

}

@media (max-width:767px) {

.custom-header-height {
height:83px;
}

.custom-header {
padding-right: 20px;
padding-left: 20px;
}

.header__container {
margin-left: 0;
}

.header-inner {
padding: 10px;
margin: 0;
}

.custom-logo {
width: 100%;
left: 0;
right: auto;
padding: 0;
}

.custom-logo a {
left: 0;
right: 4px;
padding-left: 0;
}

.custom-logo img {
max-width: 70%;
}

.custom-header-right {
width: 100%;
left: auto;
right: auto;
}

.navbar-menu-button {
margin-right: 20px;
margin-left: auto;
padding: 10px;
}
}

@media (max-width:479px) {
.header__container {
margin-left: -20px;
}

.custom-logo {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
}

dennisedson · November 30, 2021, 3:11pm

@stefen ,

Would you be able to assist here

stefen · November 30, 2021, 6:17pm

@GBonner I see a number of issues with the menu styles that are making this harder than it should be.
First, I would remove the hardcoded widths from all the list items in the menu. The width of each item should be determined by the text itself. Otherwise, you’re just causing extra issues for yourself that you can just let the browser handle for you.
Second, remove all the margins on all the list item links. Looks like this was a fix for the width issues so if you just remove this and the widths there won’t be these issues anymore.
Now, you should have a basic menu all on one line all with the same spacing. At this point, if you wanted to align something to the right, you can just use flexbox and margin-left: auto; on the list item you want to be pushed to the right. For example: the following CSS will make the pricing and request access links be right aligned:

/* fill width of it's container element */
#hs_cos_wrapper_header_menu {
 width: 100%;
 max-width: 700px;
}

/* the easy way to get something to align right */
.custom-menu-primary .hs-menu-wrapper > ul {
 display: flex;
}
.custom-menu-primary .hs-menu-wrapper>ul>li.hs-menu-item:nth-of-type(5) {
 margin-left: auto;
}

Hope that helps!

GBonner · December 1, 2021, 8:47am

Thank you very much!!

Topic		Replies	Views
Global Header - navigation menu not aligned CMS Development	5	3293	November 12, 2020
Navigation CSS CMS Development	13	18042	March 26, 2018
Can't get mobile menu icon in same row as logo at top of screen CMS Development css	2	3422	May 30, 2019
Hamburger menu duplicated Blog, Website & Page Publishing website-pages	3	1871	July 22, 2022
Adding a sticky menu CMS Development	12	20173	August 27, 2024

Responsive Header After Migration

Related topics