Brooklyn theme - Center logo in the header & Remove hamburger icon for mobile display

Ytemsstore
New Member
3 0 0

Hi I've tried with several different solutions from other community members but didn't seem to work out for my page.

I'm looking to center the logo in the header on my shop. https://ytems-se.myshopify.com

As well as remove the hamburger icon for the mobile version. It's strange because it's gone from the desktop but not mobile.

Any help is really appreciated!


0 Likes
Ytemsstore
New Member
3 0 0

PW is: jotwau

0 Likes
g33kgirl
Shopify Partner
321 95 110

Hi @Ytemsstore, the first thing you need to do is undo all the changes you made which didn't work for you like the hamburger menu.

In your timber.scss file, add this CSS at the end of the file:

.site-header .grid--table>.grid__item {
    width: 100%;
}

@media only screen and (min-width: 750px) {
     .site-header__logo img {
         margin: 0 auto;
    }
}

 

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.
0 Likes
Ytemsstore
New Member
3 0 0

Hi @g33kgirl, thank you so much for you reply!

I tried with what you suggested- but it didn't seem to work.

Do you have any more suggestions?

0 Likes
g33kgirl
Shopify Partner
321 95 110

@Ytemsstore I checked your website. The code itself works but because the menu is hidden, it's not pushing the logo image to the center. Can you undo the hamburger menu code which you tried which you said you want to display on desktop?

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.
0 Likes
g33kgirl
Shopify Partner
321 95 110

@Ytemsstore please see screenshot:

Screenshot 2021-08-04 at 7.47.41 pm.png

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.
0 Likes
g33kgirl
Shopify Partner
321 95 110

@Ytemsstore the other solution (actually a hack) is through code (modify at your own risk).

Go to Edit code -> Sections -> open header.liquid and change line 140-142 from:

 

 <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
{% else %}
 <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">

 

To:

 

 <h1 class="site-header__logo large--right" itemscope itemtype="http://schema.org/Organization">
 {% else %}
<div class="h1 site-header__logo large--right" itemscope itemtype="http://schema.org/Organization">

 

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.
0 Likes