# Responsive Header After Migration

**URL:** <https://community.hubspot.com/t/responsive-header-after-migration/47728>\
**Category:** CMS Development\
**Created:** [November 30, 2021, 12:44pm UTC](https://community.hubspot.com/t/responsive-header-after-migration/47728 "2021-11-30T12:44:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![GBonner](https://avatars.discourse-cdn.com/v4/letter/g/9de0a6/32.png) [@GBonner](https://community.hubspot.com/u/GBonner)\
**Post date:** [November 30, 2021, 12:44pm UTC](https://community.hubspot.com/t/responsive-header-after-migration/47728/1 "2021-11-30T12:44:45Z")

</div>

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.

> **[Beyond Dashboards & Reports | AI Decision Intelligence | eyko](https://eyko.ai/)**
>
> eyko Beats generates AI Playbooks from your business systems. Know what happened, why, and what to do next. Request access today.

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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) (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;  
}  
}

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 30, 2021, 3:11pm UTC](https://community.hubspot.com/t/responsive-header-after-migration/47728/2 "2021-11-30T15:11:54Z")

</div>

@stefen ,

Would you be able to assist here 😃

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [November 30, 2021, 6:17pm UTC](https://community.hubspot.com/t/responsive-header-after-migration/47728/3 "2021-11-30T18:17:06Z")

</div>

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

```lia-code-sample
/* 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!

---

<div class="post-metadata">

**Author:** ![GBonner](https://avatars.discourse-cdn.com/v4/letter/g/9de0a6/32.png) [@GBonner](https://community.hubspot.com/u/GBonner)\
**Post date:** [December 1, 2021, 8:47am UTC](https://community.hubspot.com/t/responsive-header-after-migration/47728/4 "2021-12-01T08:47:37Z")

</div>

Thank you very much!!