Header menu shrink to one line Retina Theme

Store Design
1

Hi,

Mentorpublish_1-1722495969411.png
Mentorpublish_1-1722495969411.png1148×152 12.1 KB

Can I shrink my menu to only one line?

Here is my website: https://1cabe3-26.myshopify.com/

Thank you.

2

Hello! @Mentorpublish Please follow these steps to replace this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your theme.css CSS file and go to line no: 13720 and replace the font size.
.main-nav__tier-1-link {
    font-family: Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;
    font-style: normal;
    font-weight: 700;
    position: relative;
    font-size: .8rem;/* replace this font size */
    text-transform: none;
    letter-spacing: 0px;
}
/* and add this CSS below of the file */
.main-nav {
    flex-wrap: nowrap;
}

Rishihuptech_0-1722496390572.png
Rishihuptech_0-1722496390572.png1884×873 185 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you
K.K

3

Hello @Mentorpublish

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.site-header__heading { margin: unset !important; }

niraj_patel_0-1722496494205.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

Hi @Mentorpublish

You can do that by adding this code to Custom CSS tab in Online Store > Themes > Customize > Theme settings

@media (min-width: 990px) {
.main-nav__tier-1-link { font-size: 0.9rem !important; }
}

Screenshot 2024-08-01 at 15.33.31.png
Screenshot 2024-08-01 at 15.33.31.png1229×427 247 KB

5

Hello @Mentorpublish
Go to online store ---------> themes --------------> actions ------> edit code------->theme.css ----> line number 13624
search this code

.main-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -1.25rem 0 0;
}

adn replace with this code

.main-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -2.25rem 0 0;
}

result

1.png
1.png1290×919 187 KB

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

6

Hi @ArticMaze ,

Worked fine, thank you.