Help on centering current Logo & position the Navigation bar at the very top (above logo)

Solved

Help on centering current Logo & position the Navigation bar at the very top (above logo)

NeginA
Shopify Partner
55 0 5

I would like to center the current Logo & position the Navigation bar at the very top (above logo) and search bar centered under logo In the "Charge" Shopify Theme. 

 

Screenshot 2024-01-09 at 10.28.27 AM.png

 

 

 

Your help would be greatly appreciated! 

Accepted Solution (1)

BSS-Commerce
Shopify Partner
3477 463 527

This is an accepted solution.

Hi @NeginA ,

Hi, to do that, follow these instructions:
1.  Access your Shopify admin page. Select Online Store => Themes => Edit code

view - 2024-01-17T100951.833.png

2. In the code folder, find the styles.css file and add the following code to the end of the file:

header.header {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

header nav.header__inline-menu {
  order: -1;
}

header .header__icons {
  width: 100%;
}

header .header__heading {
   margin: 10px;
}

Save the file and the result will look like this:

view - 2024-01-17T101100.734.png 

Hope it helps @NeginA 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSS-Commerce
Shopify Partner
3477 463 527

This is an accepted solution.

Hi @NeginA ,

Hi, to do that, follow these instructions:
1.  Access your Shopify admin page. Select Online Store => Themes => Edit code

view - 2024-01-17T100951.833.png

2. In the code folder, find the styles.css file and add the following code to the end of the file:

header.header {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

header nav.header__inline-menu {
  order: -1;
}

header .header__icons {
  width: 100%;
}

header .header__heading {
   margin: 10px;
}

Save the file and the result will look like this:

view - 2024-01-17T101100.734.png 

Hope it helps @NeginA 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
NeginA
Shopify Partner
55 0 5

Thank you so much!! @BSS-Commerce