The top heading bar looks messy on 2 lines

[LOFTROBE]

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

www.loftrobeshop.com

Thanks

[ZestardTech]

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

[oscprofessional]

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

[Rahul_dhiman]

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

[Anshul_arora]

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.

[BSS-TekLabs]

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

[WalkYourStyle]

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.