Navigation Menu Alignment

Tourist
6 0 0

Hi everybody,

 

I am using the Flow theme. Can anyone help with the navigation menu alignment. I would like to place it in the middle and logo on the left.

 

Here is the site:

https://makemebliss.com

 

I appreciate your help!

 

Thank you!

0 Likes
Shopify Expert
665 170 199

Hi, @Liis_Naptal ,

This is Evita from On The Map.

 

You want to center navigation list names? https://prnt.sc/pm7f3v

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes

Hello 

 

 

.top-links {
 float: left;
}

If you want only to change the menus alighnment to middle and leave icons on right then add 

.top-links ul#AccessibleNav {
    float: left;
}
.top-links--icon-links {
 margin: 10px 0 0 40px;
}
 
Likes are appreciated, If it solved your problem please mark it as accepted solution.

Thanks & Regards
Aumento Infoway Pvt Ltd.
0 Likes

Hello 

Add this css at bottom
Online Store-> Themes -> Edit code->Assets->timber.scss.css

@media only screen and (min-width: 769px){
.large--text-right {
 text-align: left !important; 
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
6 0 0

Hello Evita,

 

Yes, I would like to center the navigation list names.

 

Regards,

 

Liis

0 Likes
Shopify Expert
665 170 199

@oscprofessional , make sure you add closing tags for media query, the code you provided will break the whole scss code and the page will be broken:

@media only screen and (min-width: 769px) {
  .large--text-right {
    text-align: left !important; 
  }
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes

Hello OTM,
Yes it's my mistake.
I have edited code.
Thank you.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
2 Likes
Shopify Expert
665 170 199

Only center text without search and cart icon:

.top-links {
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-links ul.site-nav {
    width: 80%;
    align-items: center;
    justify-content: center;
    display: flex;
}
.top-links--icon-links {
    width: 20%;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
6 0 0

Is this added from here:

Assets->timber.scss.liquid?

 

Thank you!

0 Likes
Tourist
6 0 0

Thank you very much for your help, it worked :)

0 Likes