Shopify themes, liquid, logos, and UX
How can I fix these heading tabs to show neatly on one line both pc and mobile view if possible
Thanks
Hi @LOFTROBE
If you want it like this, add this CSS:
1. In your Shopify Admin go to online store > themes > actions > edit code
2. 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 </body> tag and save.
<style>
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-localizations {
max-width: 100%;
}
</style>
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.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
1. Go to 'Online Store' -> Themes -> Edit Code
2. In the assets folder locate the file 'base.css'
3. 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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024