Hello I had modified dawn theme with an inline nav menu ( code taken from another user here) but the menu width keeps changing on me and there’s a gap on both sides and scroll bar on the bottom to move it side to side, I keep manually tweaking the percentage in the code but somehow after making changes it moves and i have to change the % value again. can someone help me with this? base.css code I play around with is this…
nav.header__inline-menu {
background: #a1aec4 !important;
width: 109% !important;
text-align-last: center;
}
test123
Hi Lavished
- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
nav.header__inline-menu {
width: 100% !important;
}
Result:
Best,
Esther
thank you it worked on desktop but it is not adaptive/responsive to other display sizes see pictures. on different tablets it the gap comes back.
Hi Lavished
Please add this code as well in base.css file
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account {
padding: 0 !important;
}
Result:
unfortunately it didn’t work. I noticed that code was also used above. see pic of codes.
Hi
I tried again and it worked correctly with this code.
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account {
max-width: 100%;
padding: 0;
margin: 0;
}
I entered the codes see picture, and it doesn’t show when I inspect header see pic below. problem persist.
thanks for helping, is it better to remove inline header menu and reinstall correctly?
You can try to add this code in here: https://prnt.sc/ogPBse4C3kWo
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account {
margin: 0;
max-width: 100%;
padding: 0;
}
1 Like
IT Worked! thank you so much for persevering! 
