Shifting menu items

Solved
crashbandicoot
Tourist
24 0 2

Can somebody help me shift the menu items in my store so 'Accessories' isn't so close to the search bar?

crashbandicoot_1-1619628158775.png

 

0 Likes
g33kgirl
Shopify Partner
223 58 70

Please share your website url.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
crashbandicoot
Tourist
24 0 2

I'll send a DM! 

0 Likes
g33kgirl
Shopify Partner
223 58 70

This is an accepted solution.

Hi @crashbandicoot, you can add this code at the end of your theme-custom.css file:

.search-box {
    margin-left: 35px;
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
crashbandicoot
Tourist
24 0 2

Hi @g33kgirl I used your code but it made things worse:

 

crashbandicoot_0-1619797546694.png

 

0 Likes
Ninthony
Shopify Partner
1794 258 706

The problem here is too many links. Your only option is really to shrink the font size for your links, or add a little less spacing between them. You can't fit 6lbs of stuff in a 5lb bag and say "I don't want this stuff overflowing out of the bag."

Alternatively you could rework the search functionality to like make a dropdown search menu when you click on a magnifying glass instead of having the bar there ready to search, but that'll require a bit more customization. If you send me your link I might be able to provide you some styling options.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
g33kgirl
Shopify Partner
223 58 70

This is an accepted solution.

Hi @crashbandicoot, you can add this code to your CSS file to fix it:

.header-bottom-right > div {
  flex: 0 0 auto;
}

 

But this might push the navigation menu links on the left and overlap the logo because as @Ninthony said you have too many links in the tiny space. Apart from the suggestions @Ninthony gave, the other alternative I can think of, if you want to keep your navigation menu as is, is to separate the menu links bar and shift it under the logo and search header.  This will give the links their own space.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
crashbandicoot
Tourist
24 0 2

Thank you @g33kgirl that piece of code plus the initial code you mentioned helped! 

 

 

0 Likes