Re: The top heading bar looks messy on 2 lines

The top heading bar looks messy on 2 lines

LOFTROBE
Excursionist
56 1 7

LOFTROBE_0-1721905534728.png

 

How can I fix these heading tabs to show neatly on one line both pc and mobile view if possible

 

www.loftrobeshop.com

 

Thanks

Replies 6 (6)

ZestardTech
Shopify Partner
5833 1058 1396

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

 

ZestardTech_0-1721906719089.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

oscprofessional
Shopify Partner
16116 2409 3125

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

oscprofessional_0-1721906783026.png


Thanks

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

Rahul_dhiman
Shopify Partner
610 120 121

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
e5213afb-68a6-4206-b984-555a00dff44f.png

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

Anshul_arora
Navigator
453 128 98

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

Anshul_arora_0-1721907033269.png


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

BSS-TekLabs
Shopify Partner
2350 688 806

- Here is the solution for you @LOFTROBE 
- Please follow these steps:

step.png

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

BSSTekLabs_0-1721906991512.png

 

 

- 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


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

WalkYourStyle
Trailblazer
450 54 69

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.