Responsive Header After Migration

SOLVE
GBonner
Participant

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. 

https://eyko-20500384.hs-sites.com/ 

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

 

 

 

 

 

 

 

 

 

 




0 Upvotes
1 Accepted solution

Accepted Solutions
stefen
Solution
Key Advisor | Partner

@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!

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

3 Replies 3
dennisedson
Community Manager

@stefen ,

Would you be able to assist here 😃

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
stefen
Solution
Key Advisor | Partner

@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!

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

GBonner
Participant

Thank you very much!!