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

Ytemsstore
Visitor
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!


Replies 6 (6)

Ytemsstore
Visitor
3 0 0

PW is: jotwau

g33kgirl
Shopify Partner
390 109 142

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.
Ytemsstore
Visitor
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?

g33kgirl
Shopify Partner
390 109 142

@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.
g33kgirl
Shopify Partner
390 109 142

@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.
g33kgirl
Shopify Partner
390 109 142

@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.