How to center logo and menu

Alan_Owens
New Member
3 0 0

I'm looking for how to center my logo and menu.  I currently am using the React Theme.  Any help would be appreciated.  Thanks!

0 Likes
Darrell_Richar1
Shopify Partner
3 0 0

Hello Alan,

The only way to center this logo and menu in the theme. Is to edit the CSS in the assest folder. Within the template. 

If you'r not sure how to do this. 
Shoot me a email at info@darrellrichards.com and i'll walk you thru it. 

 

Thanks, 
Darrell Richards 

0 Likes
Jason
Shopify Expert
10354 155 1990

For testing, you may want to make these changes in a copy of your existing theme. 

Edit your shop.css.liquid file changing these:

.logo { float:left; max-width:700px; } /* around line 137 */
.logo a, .logo img { display:block; margin:0px; } /* around line 141 */

into these:

.logo { text-align: center; }
.logo a, .logo img { display: inline-block; margin:0px; }

With luck, it will look like this:

 

If you'r not sure how to do this...

@Darrell - it makes more sense to keep the walk throughs in the thread (rather than email) so it remains as guide for others in the future.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
Darrell_Richar1
Shopify Partner
3 0 0

@Jason Thanks, Still kinda new to these forums was not fully sure to how they wanted the guides layout. But i will in the future. 

0 Likes
Alan_Owens
New Member
3 0 0

Thanks guys, worked like a charm on my logo.  I tried the same type of changes on my menu bar, but I'm not having any luck.  Any tips on where to make the edits or if they would be different.  Thanks again, ya'lls help is great!

0 Likes
Jason
Shopify Expert
10354 155 1990

Yeah, the menu is using floats so you (sadly) can't just throw a text-align:center onto it. It's still a simple enough tweak.  

/* change this */
ul.horizontal > li, ol.horizontal > li { display: block; float: left; }

/* into */
ul.horizontal > li, ol.horizontal > li {display: inline-block;}

and add:

nav.main ul{ text-align: center; }

Hopefully that doesn't break anything else on the site, but I think you'll be aok.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Alan_Owens
New Member
3 0 0

Nothing broke, and I am all centered up.  Thanks again!

0 Likes
Caroline_Schnap
Shopify Staff
Shopify Staff
5711 1 345

A few people are having issues with the code presented here.

Here's an alternative:

/* Centering logo and menu */
@media only screen and (min-width: 479px){
  .logo a, .logo img {
  margin: 0px auto;
  }
  .logo {
  float: none;
  margin: 0 auto;
  }
}

nav ul.horizontal {
text-align: center;
}

nav ul.horizontal > li {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
float: none;
text-align:center;
}

 

simoneg80
Excursionist
17 0 7

Can someone please help me do this with the Brooklyn?