How can I fix these heading tabs to show neatly on one line both pc and mobile view if possible
Thanks
Topic summary
A Shopify store owner is experiencing navigation menu items wrapping onto two lines in the header, creating a cluttered appearance. They want the menu to display neatly on one line for both desktop and mobile views.
Multiple CSS solutions proposed:
- Simple fix: Add
max-width: 100% !important;to.header.page-widthin base.css to allow full width utilization - Alternative approach: Change desktop logo position to ‘top left’ to move navigation below the logo with full-width area
- Padding adjustment: Modify the header padding values (from 5rem) in the media query at line 138 of base.css
- JavaScript solution: Insert custom script in theme.liquid before
</body>tag to force single-row display - Responsive font sizing: Implement multiple media queries that progressively reduce menu font size (from 13px down to 6px) at various breakpoints to prevent wrapping
Trade-off noted: The font-size reduction approach works but may compromise readability as text becomes smaller to fit all items on one line.
All solutions involve editing the theme’s base.css or theme.liquid files through Shopify Admin > Online Store > Themes > Edit Code.
2 Likes
Hi @LOFTROBE
If you want it like this, add this CSS:
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottom of the file:
.header {
max-width: 100%!important;
}
Hello @LOFTROBE
The navigation links added are more and it is not possible to adjust in single line with the existing design for header.
If you try the desktop logo position to be ‘top left’ then the navigation will get down with full width area like below
Thanks
Hello @LOFTROBE
Go to online store ---------> themes --------------> actions ------> edit code------->base.css —> line number 138
search this code.
@media screen and (min-width: 990px) {
.header:not(.drawer-menu).page-width {
padding-left: 5rem;
padding-right: 5rem;
}
and replace with this code.
@media screen and (min-width: 990px) {
.header:not(.drawer-menu).page-width {
padding-left: 5rem;
padding-right: 5rem;
max-width: 100%;
}
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
Hello @LOFTROBE ,
Please add the below code at the bottom of the theme.liquid file before tag and save.
I hope the code will help you to display Navigation Menu items in 1 row.
After applying code, output will be like this -:
Thank you.
- Here is the solution for you @LOFTROBE
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (min-width: 990px) {
.header:not(.drawer-menu).page-width {
max-width: 100% !important;
}
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
-
Go to ‘Online Store’ → Themes → Edit Code
-
In the assets folder locate the file ‘base.css’
-
At the bottom of the file add this cod
/* Header Preventing wrap CSS Start */
.header{
max-width: 100%;
}
@media (max-width: 1047px){
.header__menu-item.list-menu__item.link{
font-size: 6px;
}
}
@media (max-width: 1097px){
.header__menu-item.list-menu__item.link{
font-size: 7px;
}
}
@media (max-width: 1147px){
.header__menu-item.list-menu__item.link{
font-size: 8px;
}
}
@media (max-width: 1197px){
.header__menu-item.list-menu__item.link{
font-size: 9px;
}
}
@media (max-width: 1247px){
.header__menu-item.list-menu__item.link{
font-size: 10px;
}
}
@media (max-width: 1297px){
.header__menu-item.list-menu__item.link{
font-size: 11px;
}
}
@media (max-width: 1347px){
.header__menu-item.list-menu__item.link{
font-size: 12px;
}
}
@media (max-width: 1397px){
.header__menu-item.list-menu__item.link{
font-size: 13px;
}
}
/* Header Preventing wrap CSS End */
This works, but it might be difficult to read the options because, in order to fit everything on the same line, the font size needs to be smaller.