Move navigation menu to one line

Klmp82
Visitor
2 0 0

Hello, my navigation menu is currently split on two lines, how can I get it all on one line? It looks like this on smaller and larger screens. 

 

Site: savethedate-neon.myshopify.com

PW: twaosh

 

Menu.PNG

 

Thank you

Replies 4 (4)

threed
Shopify Partner
129 17 47

Your menu has a lot of long words in them. When the space is all taken on one line, it will go to the next one. I have suggestions, but lease note that doing these will make readability harder for your customers (especially for those on smaller screens):

  • Make the menu font smaller
  • Reduce the padding between menu items
  • Make the logo smaller to give the menu more space

 

I personally recommend doing any of these to keep user experience good:

  • Reword the menu items to save space
  • Prioritize which menu items to keep and which to remove
  • Code in your own dropdown mega menu
If I helped you, please help me by marking my comment as an accepted solution.
I am open to work and have been working with the Shopify system for several years.

diego_ezfy
Shopify Partner
2885 551 861

@Klmp82

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:

@media (min-width: 750px){
    .header__inline-menu{
    display: flex;
    margin-left: 10px !important;;
}

.list-menu--inline{
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.list-menu--inline *{
    font-size: 10px !important;
}

.list-menu--inline li > a,
.list-menu--inline li summary{
    padding-left: 3px;
    padding-right: 3px !important;
    margin-right: 10px !important;
    
    
}
}


You can try this code but, ideally, taking into consideration a good UX (which ultimately is what will generate you sales), you should not use code for this. The menus should be rethought to be as compact as possible.

Kind regards,
Diego

AvadaCommerce
Shopify Partner
3879 839 945

Hi @Klmp82 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

 

@media (min-width: 750px){
  .header__inline-menu{
    display: flex;
    margin-left: 10px !important;;
  }
  .list-menu--inline{
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .list-menu--inline *{
    font-size: 10px !important;
  }
  .list-menu--inline li > a,
  .list-menu--inline li summary{
    padding-left: 3px;
    padding-right: 3px !important;
    margin-right: 10px !important;
  }
}

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

banned
entreprenegra
Visitor
2 0 0

Thank you, that solution worked for me as well. how do I center the menu? This is what is currently looks like.Screenshot (134).png